Question

使用chart.js和插件chartjs-plugin-annotation时，在使用angular 5时未显示注释，不会显示任何错误消息。

我创建了一个显示问题的代码的简化示例

console.log（Chart.plugins）显示该插件看起来已注册为plugin [3]，但它没有内置ID的ID，这是问题吗？

chart.component.ts

import { Component, Inject } from '@angular/core';
import { Chart } from 'chart.js';
import 'chartjs-plugin-annotation';

@Component({
  selector: 'app-chart-component',
  templateUrl: './chart.component.html'
})
export class ChartComponent {
  public currentCount = 0;

  chart : Chart ; // This will hold our chart info

  simpleChart() {

    console.log(Chart.plugins);

    this.chart = new Chart('canvas', {
      type: 'line',
      data: {
        labels: ['0','1','2', '3','4'],
        datasets: [
          {
            data: [0,1,2,5,4,5],
            borderColor: "#3cba9f",
            fill: false,
          },

        ]
      },
      options: {
        legend: {
          display: false
        },
        scales: {
          xAxes: [{
            display: true
          }],
          yAxes: [{
            display: true,
            id: 'y-axis-0'
          },
          ]
        },
        plugins: {
          annotation: {
            annotations: [{
              type: 'line',
              id: 'hLine',
              mode: 'horizontal',
              scaleID: 'y-axis-0',
              value: 2.5,  // data-value at which the line is drawn
              borderWidth: 2.5,
              borderColor: 'black'
            }]
          }
        }
      }
    });
  }

  ngOnInit() {
    this.simpleChart();
  }
}

任何帮助将不胜感激。

Answer 1

尝试使注释正常工作我很有趣-如果您尚未解决问题，请尝试...

将导入语句更改为：

contact

将import * as ChartAnnotation from 'chartjs-plugin-annotation';更改为：

ngOnInit()

最后，我相信注释对象应该是选项的子对象，而不是插件。我的看起来像这样：

ngOnInit() {
  let namedChartAnnotation = ChartAnnotation;
  namedChartAnnotation["id"]="annotation";
  Chart.pluginService.register( namedChartAnnotation);
  this.simpleChart();
}

制作漂亮的图形：）

（除了我得到了低音的声音！哎呀！）

Answer 2

作为阿德所说内容的补充。您也可以通过这种方式添加插件

import { ChartOptions } from 'chart.js';
import * as ChartAnnotation from 'chartjs-plugin-annotation';

this.chart = new Chart('canvas', {
  ...
  options: {
    ...
    annotation: { ... }
  } as ChartOptions,
  plugins: [ChartAnnotation]
});

添加{...} as ChartOptions使TypeScript不会抱怨

Answer 3

对于任何遇到TypeScript错误并指出注释不是ChartOptions属性的人。在寻找答案一两个星期后，我找到了解决此问题的方法。

遵循此路径：node_modules/@types/chart.js/index.d.ts

打开index.d.ts，找到接口ChartOptions { 并添加此行。注释？：对象； }

这是我在其他所有解决方案均失败后解决问题的方式。

Answer 4

最近我遇到了同样的问题，我通过构造函数下的registerPlugin修复了该问题。

这是我的解决方案：

将插件导入您的组件：

import * as annotations from 'chartjs-plugin-annotation';

将此行添加到您的构造函数中：

constructor(...) { BaseChartDirective.registerPlugin(annotations);}

如果您使用打字稿，则可能需要使用注释扩展ChartOptions接口：

interface CustomizeChartOptions extends ChartOptions {
    annotation?: any
}

使用注释配置chartOptions

public barChartOptions: CustomizeChartOptions = {
        // your other ChartOptions setting here
        annotation: {
            annotations: [
                {
                    drawTime: "afterDatasetsDraw",
                    type: 'line',
                    mode: 'vertical',
                    scaleID: 'x-axis-0',
                    value: '1 Dec',
                    borderColor: 'red',
                    borderWidth: 2,
                    label: {
                        content: 'CURRENT',
                        enabled: true,
                        position: 'top'
                    }
                }
            ]
        }

    };

chartjs-plugin-annotations不显示在角度5中

4 个答案: