Angular 2中未显示图表注释答案

【问题标题】：chart annotations not showing in Angular 2Angular 2中未显示图表注释
【发布时间】：2018-03-05 21:30:35
【问题描述】：

我正在尝试将 chartjs-plugin-annotation 插件与 Chart.js 和 Angular 一起使用。

我已经基于 chartjs-plugin-annotation 示例代码构建了一个非常精简的图表，它使用直接的 HTML 和 JavaScript 可以正常工作，显示几个点和一条水平线：

<!doctype html>
<html>

<head>
    <script src="./Chart.bundle.js"></script>
    <script src="./chartjs-plugin-annotation.js"></script>
</head>

<body>
    <div style="width:75%">
        <div>
            <canvas id="canvas"></canvas>
        </div>
    </div>
    <script>
        var scatterChartData = {
          datasets: [{
            data: [
              { x:0, y:0 },
              { x:10, y:10 },
              { x:5, y:10 }
            ]
          }]
        };
        window.onload = function() {
            var ctx = document.getElementById("canvas").getContext("2d");
            window.myScatter = Chart.Scatter(ctx, {
                data: scatterChartData,
                options: {
                    scales: {
                        xAxes: [{
                        }],
                        yAxes: [{
                        }]
                    },
                    annotation: {
                        annotations: [{
                            type: 'line',
                            mode: 'horizontal',
                            scaleID: 'y-axis-1',
                            value: 5,
                            borderColor: 'rgba(255, 0, 0, 0.5)',
                            borderWidth: 4,
                        }]
                    }
                }
            });
        };
    </script>
</body>

</html>

但是当我尝试在 Angular 中做同样的事情时，图表注释并没有出现，尽管图表按预期显示：

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

@Component({
  selector: 'app-graphtest',
  template: `
     <div style="width:75%">
       <div>
         <canvas #canvas></canvas>
       </div>
     </div>`
})
export class GraphTest implements OnInit {

  constructor() {}

  ngOnInit() {
    let ctx = this.canvas.nativeElement.getContext('2d');
    this.myScatter = Chart.Scatter(
            ctx,
            {
                data: this.scatterChartData,
                options: {
                    scales: {
                        xAxes: [{
                        }],
                        yAxes: [{
                        }]
                    },
                    annotation: {
                        annotations: [{
                            type: 'line',
                            mode: 'horizontal',
                            scaleID: 'y-axis-1',
                            value: 5,
                            borderColor: 'rgba(255, 0, 0, 0.5)',
                            borderWidth: 4,
                        }]
                    }
                }
            }
        );
  }

  @ViewChild('canvas') canvas;

  myScatter;

  scatterChartData = {
    datasets: [{
      data: [
        { x:0, y:0 },
        { x:10, y:10 },
        { x:5, y:10 }
      ]
    }]
  };

}

谁知道我做错了什么？？

【问题讨论】：

标签： angular chart.js

【解决方案1】：

在 App.module.ts 中，在 import zone 上，粘贴这一行 import 'chartjs-plugin-annotation';

【讨论】：

希望有帮助！！

【解决方案2】：

添加行：

Chart.pluginService.register(annotation);

在您的 ngInit() 函数的顶部，应该这样做。

【讨论】：