正如您在标题中看到的那样,我收到了一个错误:类型‘ChartComponent’中缺少属性‘type’,但类型‘ApexChart’中需要属性‘type’.当我try 其他任何操作时,我收到以下错误:

类型‘{type:string;}’不可赋值给类型‘ApexChart’.类型 属性‘type’的不兼容.类型‘字符串’是不可赋值的 若要键入‘ChartType’.

我的html代码:

 <apx-chart[series]="series" [chart]="chart" [title]="title"></apx-chart>

在html中也是这样try 的:

 <apx-chart
  [series]="chartOptions.series!"
  [chart]="chartOptions.chart!"
  [xaxis]="chartOptions.xaxis!"
  ></apx-chart>

Ts中的代码:

import { Component, OnInit, ViewChild } from '@angular/core';
import {
  ChartComponent,
  ApexAxisChartSeries,
  ApexChart,
  ApexXAxis,
  ApexTitleSubtitle
} from "ng-apexcharts";
export type ChartOptions = {
  series: ApexAxisChartSeries;
  chart: ApexChart;
  xaxis: ApexXAxis;
  title: ApexTitleSubtitle;
};

export class InsightsComponent implements OnInit {
  series: any;
  title: any;
  @ViewChild("chart") chart: ChartComponent;
  public chartOptions: Partial<ChartOptions>;
constructor() { }
    this.chartOptions = {
      series: [
        {
          name: "My-series",
          data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
        }
      ],
      chart: {
        height: 350,
        type: "line",
        width:500,
      },
      title: {
        text: "Frakture"
      },
      xaxis: {
        categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"]
      }
    };
  }

我try 将图表添加为任意或未定义.此外,我还try 将其添加为接口:

export interface ChartOptions  {
chart: any;

}

推荐答案

我是这样解决这个问题的:

HTML.代码:

<apx-chart[series]="chartOptions.series"[chart]="chartOptions.chart"[xaxis]="chartOptions.xaxis"></apx-chart>

特克斯.代码:

import {Component, OnInit} from '@angular/core';
import {ApexAxisChartSeries, ApexChart, ApexXAxis} from "ng-apexcharts";

export type ChartOptions = {
    series: ApexAxisChartSeries;
    chart: ApexChart;
    xaxis: ApexXAxis;
};

@Component({
    selector: 'app-insights',
    templateUrl: './insights.component.html',
    styleUrls: ['./insights.component.scss']
})

export class InsightsComponent implements OnInit {
    public chartOptions: ChartOptions;
    title: any;

    constructor() {
        this.chartOptions = {
            series: [{
                name: 'ExpensesPerMonth',
                data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

            }, {
                name: 'IncomePerMonth',
                data: [1600, 1500, 1500, 1500, 1500, 1500, 0, 0, 0, 0, 0, 0,]

            }, {
                name: 'InvoicedPerMonth',
                data: [2600, 2500, 2500, 2500, 2500, 2500, 0, 0, 0, 0, 0, 0,]
                 
            }],
                xaxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            },
            chart: {
                type: 'bar',
                height: 250,
            },
        };
    }

Typescript相关问答推荐

如何在TypeScript对象迭代中根据键推断值类型?

有没有可能使用redux工具包的中间件同时监听状态的变化和操作

我应该使用什么类型的React表单onsubmit事件?

如果请求是流,如何等待所有响应块(Axios)

如何正确地对类型脚本泛型进行限制

React重定向参数

获取函数中具有动态泛型的函数的参数

接口中函数的条件参数

参数属性类型定义的REACT-RUTER-DOM中的加载器属性错误

函数重载中的不正确TS建议

在打印脚本中使用泛型扩展抽象类

如何将父属性类型判断传播到子属性

是否有可能避免此泛型函数体中的类型断言?

在TypeScript中扩展重载方法时出现问题

在打字脚本中对可迭代对象进行可变压缩

为什么`map()`返回类型不能维护与输入相同数量的值?

typescript如何从映射类型推断

如何将元素推入对象中的类型化数组

如何使用动态生成的键和值定义对象的形状?

为什么我无法在 TypeScript 中重新分配函数?