ChartJS 预期的类型来自属性'XAxes'和'yAxes'，该属性在类型'_DeepPartialObject〈{ [key：字符串]：

h79rfbju 于 2023-03-23 发布在 Chart.js

关注(0)|答案(2)|浏览(98)

我尝试EMI计算器模块，但是遇到了属性'xAxes'上的错误，并且在类型'_DeepPartialObject〈{ [key：string]：ScaleOptionsByType;}〉'。
我无法在github上找到开发者。我可以在这个群里寻求建议吗？
https://github.com/eskutti/EMI-Calculator/issues/1

this.barChart = new Chart(this.barCanvas.nativeElement, {
  type: 'bar',
  data: {
    labels: labels,
    datasets: [{
      label: 'Perincipal',
      backgroundColor: "rgba(0, 179, 0,0.5)",
      data: principals
    }, {
      label: 'Interest',
      backgroundColor: "rgba(255, 26, 26, 0.5)",
      data: interests
    }]
  },
  options: {
    title: {
      display: false,
    },
    tooltips: {
      mode: 'index',
      intersect: false
    },
    responsive: true,
    scales: {
      xAxes: [{
        gridLines: {
          display: false
        },
        stacked: true,
      }],
      yAxes: [{
        gridLines: {
          display: false
        }, ticks: {
          // Include a dollar sign in the ticks
          callback: function (value, index, values) {
            let n = value;
            let d = 2;
            let x = ('' + n).length;
            let p = Math.pow;
            d = p(10, d)
            x -= x % 3
            return Math.round(n * d / p(10, x)) / d + " kMGTPE"[x / 3]
            //return this.abbrNum(value, 2);
          }
        },
        stacked: true,
      }]
    }
  }
});

chart.js

来源：https://stackoverflow.com/questions/67892491/the-expected-type-comes-from-property-xaxes-and-yaxes-which-is-declared-here

2条答案

按热度按时间

ryoqjall1#

从错误中可以看出，您正在运行chart.js版本3，而您的配置是v2语法，因此可能需要chart.js版本2，
尝试运行npm i chart.js@2.9.4来安装v2的最新版本，比它应该工作.

赞(0）回复(0）举报 2023-03-23

ttcibm8c2#

看起来你使用的是v.3.x.x版本，实现相对于v.2.x.x有所改变，如文档中所示，有必要在输入之前实现一个步骤，而不是直接从那里开始错误。正确的方法是：
为app-chart-meta-config.ts创建新文件

import * as ng2Charts from 'ng2-charts';

export interface AppChartMetaConfig extends ng2Charts.BaseChartMetaConfig {
  datasetTypes: ng2Charts.ChartMetaConfig['datasetTypes'];
  scaleTypes: ng2Charts.ChartMetaConfig['scaleTypes'];
  pluginOptions: {
    datalabels?: any;
  };
  additionalOptions: {
    annotation?: any;
  };
}

另一个是app-chart-config.ts

import * as ng2Charts from 'ng2-charts';
import { AppChartMetaConfig } from './app-chart-meta-config';
export { AppChartMetaConfig } from './app-chart-meta-config';
export {
  ChartsModule,
  Color,
  Colors,
  defaultColors,
  ChartType,
  ChartDataSetsBase,
  ChartDataSetsUnion,
  BaseChartMetaConfig,
  ChartMetaConfig,
  LegacyMetaConfig,
  PromiscuousMetaConfig,
  LinearScale,
  LogarithmicScale,
  CategoryScale,
  CartesianScale,
  RadialScale,
  RadialLinearScale,
  ScaleUnion,
  ThemeService,
  BaseChartDirective,
  Label,
} from 'ng2-charts';

export type AngularChart = ng2Charts.AngularChart<AppChartMetaConfig>;
export type ChartOptions = ng2Charts.ChartOptions<AppChartMetaConfig> & AppChartMetaConfig['additionalOptions'];
export type ChartDataSetsBar = ng2Charts.ChartDataSetsBar<AppChartMetaConfig>;
export type ChartDataSetsLine = ng2Charts.ChartDataSetsLine<AppChartMetaConfig>;
export type ChartDataSetsDoughnut = ng2Charts.ChartDataSetsDoughnut<AppChartMetaConfig>;
export type ChartDataSetsRadar = ng2Charts.ChartDataSetsRadar<AppChartMetaConfig>;
export type ChartDataSetsBubble = ng2Charts.ChartDataSetsBubble<AppChartMetaConfig>;
export type ChartDataSetsScatter = ng2Charts.ChartDataSetsScatter<AppChartMetaConfig>;
export type MultiDataSet = ng2Charts.MultiDataSet<AppChartMetaConfig>;
export type SingleDataSet = ng2Charts.SingleDataSet<AppChartMetaConfig>;

和输出你的类型这样

import { Component, OnInit } from '@angular/core';
import { ChartType, Label } from 'ng2-charts';
import * as pluginDataLabels from 'chartjs-plugin-datalabels';
import { ChartOptions, ChartDataSetsBar } from '../app-chart-config'; // the correct  ChartOptions

这将修复您得到的错误，而不是版本中的后退。

赞(0）回复(0）举报 2023-03-23

我来回答

ChartJS 预期的类型来自属性'XAxes'和'yAxes'，该属性在类型'_DeepPartialObject〈{ [key：字符串]：

2条答案

相关问题

热门标签

最新问答