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

Question

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

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

console.log(Chart.plugins) 显示插件看起来注册为 plugin[3] 但是它没有内置的 id，这是一个问题吗？

图表组件.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

我在尝试让注释工作时玩得很开心 - 如果你还没有解决它，试试这个......

将您的进口声明更改为：

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)"
            }
        ]
    }
}

制作一个漂亮的图表:)

（除了我得到了bass ackwards的颜色！哎呀！）

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 ChartOptionsTypeScript 不会抱怨的原因