Question

        <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');}"

Answer 1

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

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

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

ave

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

data <- read.table(text="PROFILE TIME   NTHREADS PARAM1 PARAM2 PARAM3
                         prof1   3.01   1        4      10     1
                         prof2   2.90   2        4      10     1
                         prof1   3.02   1        4      10     1
                         prof2   1.52   2        4      10     2
                         prof1   1.60   1        4      10     2", header=TRUE)

data$min_TIME <- ave(data$TIME, data$PROFILE, data$NTHREADS, FUN=min)
data

#   PROFILE TIME NTHREADS PARAM1 PARAM2 PARAM3 min_TIME
# 1   prof1 3.01        1      4     10      1     1.60
# 2   prof2 2.90        2      4     10      1     1.52
# 3   prof1 3.02        1      4     10      1     1.60
# 4   prof2 1.52        2      4     10      2     1.52
# 5   prof1 1.60        1      4     10      2     1.60

对于额外积分，您可以将其包含在app.component.ts中，在班级下方/外部，但是您需要使用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; } } });声明图表

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

1 个答案: