chartjs-plugin-annotations 未以角度 5 显示答案

【问题标题】：chartjs-plugin-annotations not displayed in angular 5chartjs-plugin-annotations 未以角度 5 显示
【发布时间】：2018-08-03 03:05:09
【问题描述】：

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

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

console.log(Chart.plugins) 显示插件看起来注册为插件 [3] 但它没有内置的 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();
  }
}

任何帮助将不胜感激。

【问题讨论】：

标签： angular5 chart.js

【解决方案1】：

我在尝试让注释正常工作时获得了一些乐趣 - 如果您还没有解决它，试试这个...

将您的导入语句更改为：

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

将ngOnInit() 更改为：

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

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

"options": {
    "legend": {
        "display": true
    },
    "scales": {
        "xAxes": [{
                "display": true
            }
        ],
        "yAxes": [{
                "display": true,
                "ticks": {
                    "min": 0,
                    "max": 40
                }
            }
        ]
    },
    "tooltips": {
        "enabled": true,
        "backgroundColor": "#eee",
        "titleFontColor": "#000"
    },
    "annotation": {
        "annotations": [{
                "type": "box",
                "xScaleID": "x-axis-0",
                "yScaleID": "y-axis-0",
                "yMin": 0,
                "yMax": 15,
                "xMin": 864,
                "xMax": 1285,
                "borderWidth": 1,
                "backgroundColor": "rgba(200,60,60,0.25)",
                "borderColor": "rgba(200,60,60,0.25)"
            }, {
                "type": "box",
                "xScaleID": "x-axis-0",
                "yScaleID": "y-axis-0",
                "yMin": 30,
                "yMax": 40,
                "xMin": 864,
                "xMax": 1285,
                "borderWidth": 1,
                "backgroundColor": "rgba(60,60,200,0.25)",
                "borderColor": "rgba(60,60,200,0.25)"
            }
        ]
    }
}

制作漂亮的图表:)

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

【讨论】：

我明白为什么我无法弄清楚这一点，打字稿类型定义不正确。设置 options.annotations = { ... } 不会编译 - 类型定义指向使用 options.plugins.annotations，它可以编译但不起作用。
对我有用，很好的解决方案

【解决方案2】：

作为 Ade 所说的补充。你也可以这样添加插件

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 不会抱怨

【讨论】：

无需添加来自@ade 的ngOnInit 即可获得它

【解决方案3】：

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

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

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

这就是我在其他所有解决方案都失败后解决问题的方法。

【讨论】：

【解决方案4】：

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

这是我的解决方案：

将插件导入您的组件：

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

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

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

如果您使用的是 typescript，您可能需要使用注释扩展 ChartOptions 接口：

interface CustomizeChartOptions extends ChartOptions {
    annotation?: any
}

使用注释配置您的图表选项

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'
                    }
                }
            ]
        }

    };

【讨论】：