如何在 ng2 图表中使用插件

Question

我不确定如何将插件导入ng2图表，特别是注释插件。我正在使用Angular2/Ionic2。似乎没有任何关于此的文档或答案。

Answer 1

我会避免像这样声明图表。相反，您可以执行import {Chart} from 'chart.js'因为它无论如何都是ng2图表的子依赖项。

通过这种方法，您的IDE仍然可以执行自动完成，并且您不会告诉angular只是相信有一种叫做Chart的东西。

为了保持一致性，您还应该将其添加到您的package.json中。

Answer 2

也许遵循这个线程（https://github.com/valor-software/ng2-charts/issues/496），以防出现更"官方"的方式，但这是我所做的：

在组件的顶部：

declare var Chart: any;

这将阻止 TypeScript 抱怨并允许您访问 Chart 对象。

然后，您可以使用：

Chart.pluginService.register

这是我正在使用的插件的代码示例：https://github.com/chartjs/Chart.js/issues/78#issuecomment-220829079

更新（2018 年 5 月）：这个答案可能无效，也不是最好的方法。

Answer 3

例如在

甜甜圈图的中心绘制，我找到了在选项动画中使用它的解决方法，因此无需重新设置插件

    animation: {
      onProgress: function(chart) {
        let width = chart.chart.width,
          height = chart.chart.height,
          ctx = chart.chart.ctx;
        ctx.restore();
        let fontSize = (height / 114).toFixed(2);
        ctx.font = fontSize + "em sans-serif";
        ctx.textBaseline = "middle";
        ctx.fillStyle = '#dddddd';
        let text = "75%",
          textX = Math.round((width - ctx.measureText(text).width) / 2),
          textY = height / 2;
        ctx.fillText(text, textX, textY);
        ctx.save();
      },
      onComplete: function(chart) {
        let width = chart.chart.width,
          height = chart.chart.height,
          ctx = chart.chart.ctx;
        ctx.restore();
        let fontSize = (height / 114).toFixed(2);
        ctx.font = fontSize + "em sans-serif";
        ctx.textBaseline = "middle";
        ctx.fillStyle = '#dddddd';
        let text = "75%",
          textX = Math.round((width - ctx.measureText(text).width) / 2),
          textY = height / 2;
        ctx.fillText(text, textX, textY);
        ctx.save();
      },
    },

Answer 4

这花了我很长时间才弄清楚，所以在这里添加对我有用的东西，以防其他人在 Angular 2+ 中为此苦苦挣扎：

app.module.ts：

import * as ChartLabels from 'chartjs-plugin-labels';
...
export class AppModule {
  constructor() {
    BaseChartDirective.unregisterPlugin(ChartLabels); // this makes chart plugins work in components
  }
}

组件.ts：

... // other imports
import * as ChartLabels from 'chartjs-plugin-labels';
  ... // component annotations
  export class MyChartComponent {
    ... // other chart members
    public doughnutChartPlugins = [ChartLabels];
    public doughnutChartOptions: ChartOptions = { 
      responsive: true,
      maintainAspectRatio: true,
      plugins: {
        labels: {
          render: 'value',
        }
      },
    };
   ... // constructor and so on

组件.html

<canvas baseChart
    [data]="doughnutChartData"
    [labels]="doughnutChartLabels"
    [chartType]="doughnutChartType"
    [options]="doughnutChartOptions"
    [plugins]="doughnutChartPlugins"
    [legend]="doughnutChartLegend"
    [colors]="doughnutChartColors"
>
</canvas>