首页 文章

如何使用Chart.js AngularJS 2.0在圆环图中添加文本？

提问于
浏览 次
0
<p-chart id="first" *ngIf="!loading && total > 0"
                 height="200" type="doughnut" [data]="dataForActiveInactive" [options]="chartOptions"></p-chart>

如何在甜甜圈内添加文字？这里有一些代码示例，但它们不适用于AngularJS 2.0 .

我正在使用PrimeNG for AngularJS 2.0，它使用了ChartJS：http://www.primefaces.org/primeng/#/chart/doughnut

我已经尝试将动画对象设置为内联但不起作用：

animation="{onAnimationComplete: function () {alert('animation complete');}"
angular chart.js primeng

1 回答

  • 0

    解决了它，也许不是理想的，但解决了它 .

    注册一个插件，使工具提示保持运行状态，然后从选项中调用插件 .

    在index.html中导入chart.js的位置附带一个脚本文件，其中包含以下代码：

    Chart.pluginService.register({
    beforeRender: function (chart) {
    if (chart.config.options.showAllTooltips) {

        chart.pluginTooltips = [];
        chart.config.data.datasets.forEach(function (dataset, i) {
            chart.getDatasetMeta(i).data.forEach(function (sector, j) {
                chart.pluginTooltips.push(new Chart.Tooltip({
                    _chart: chart.chart,
                    _chartInstance: chart,
                    _data: chart.data,
                    _options: chart.options.tooltips,
                   _active: [sector]
                }, chart));
            });
        });

        chart.options.tooltips.enabled = false;
    }
},
  afterDraw: function (chart, easing) {
    if (chart.config.options.showAllTooltips) {
        if (!chart.allTooltipsOnce) {
            if (easing !== 1)
                return;
            chart.allTooltipsOnce = true;
        }

        chart.options.tooltips.enabled = true;
        Chart.helpers.each(chart.pluginTooltips, function (tooltip) {
            tooltip.initialize();
            tooltip.update();
            tooltip.pivot();
            tooltip.transition(easing).draw();
        });
        chart.options.tooltips.enabled = false;
    }
  }
});

    然后在图表的选项中包括：

    options: {
    showAllTooltips: true
}

    对于额外的积分，您可以将它包含在app.component.ts中，在类的下方/外部，但是您需要使用 declare var Chart:any; 声明图表

    回复于

相关问题