Question

我正在尝试使用Chart.js和Angular的chartjs-plugin-annotation插件。

我基于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 }
      ]
    }]
  };

}

任何人都知道我做错了什么？

Answer 1

在App.module.ts的导入区域中，粘贴此行 import 'chartjs-plugin-annotation';

Answer 2

添加行：

Chart.pluginService.register(annotation);

在您的ngInit()函数顶部的

应该可以。

图表注释未在Angular 2中显示

2 个答案: