使用 Chart.js 和 Angular2、Ionic2 的圆环图内的文本答案

【问题标题】：Text inside Doughnut chart using Chart.js and Angular2, Ionic2使用 Chart.js 和 Angular2、Ionic2 的圆环图内的文本
【发布时间】：2017-10-07 09:04:30
【问题描述】：

如何使用 Chart.js 和 Angular2 在环形图中添加文本标签？我看到了有关此主题的一些答案，但由于我正在使用 Ionic2 应用程序，因此没有一个对我有用。这是我的简化代码：

  import { Chart } from 'chart.js';

    @ViewChild('doughnutCanvas') doughnutCanvas;

    ionViewDidEnter() {

    this.doughnutChart = new Chart(this.doughnutCanvas.nativeElement, {

      type: 'doughnut',
      data: {
        labels: this.titles,
        datasets: [{
          label: '# of Work',
          data: this.times,
          backgroundColor: [
            'rgba(255, 99, 132, 0.5)',
            'rgba(54, 162, 235, 0.5)'
          ],
          hoverBackgroundColor: [
            "#FF6384",
            "#36A2EB"
          ]
        }]
      },
      options: {
        responsive: true,
        legend: {
          display: false
        }
      }
    });
  }

【问题讨论】：

标签： javascript angular charts ionic2 chart.js

【解决方案1】：

这可以通过在生成图表之前创建/注册插件来实现，您可以通过以下方式创建插件...

Chart.plugins.register({
    beforeDraw: function(chart) {
        var data = chart.data.datasets[0].data;
        var sum = data.reduce(function(a, b) {
            return a + b;
        }, 0);
        var width = chart.chart.width,
            height = chart.chart.height,
            ctx = chart.chart.ctx;
        ctx.restore();
        var fontSize = (height / 10).toFixed(2);
        ctx.font = fontSize + "px Arial";
        ctx.textBaseline = "middle";
        var text = sum,
            textX = Math.round((width - ctx.measureText(text).width) / 2),
            textY = height / 2;
        ctx.fillText(text, textX, textY);
        ctx.save();
    }
});

ᴅᴇᴍᴏ

// register plugin
Chart.plugins.register({
    beforeDraw: function(chart) {
        var data = chart.data.datasets[0].data;
        var sum = data.reduce(function(a, b) {
            return a + b;
        }, 0);
        var width = chart.chart.width,
            height = chart.chart.height,
            ctx = chart.chart.ctx;
        ctx.restore();
        var fontSize = (height / 10).toFixed(2);
        ctx.font = fontSize + "px Arial";
        ctx.textBaseline = "middle";
        var text = sum,
            textX = Math.round((width - ctx.measureText(text).width) / 2),
            textY = height / 2;
        ctx.fillText(text, textX, textY);
        ctx.save();
    }
});

// generate chart
var ctx = document.getElementById('canvas').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ["Red", "Blue", "Yellow"],
        datasets: [{
            data: [300, 50, 100],
            backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
            hoverBackgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"]
        }]
    },
    options: {
        responsive: false,
        legend: {
            display: false
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="canvas"></canvas>

【讨论】：

如何让它响应变化？
@ChrisK.um.. 有什么变化？图表大小？
我想显示图表数据的总和，所以如果数据发生变化我希望文本显示一个新的总和。
我想这样做，但它对我不起作用:(
@ChrisK。有什么问题？ ://

【解决方案2】：

如果你们想添加图例。你应该使用改变高度

height = (chart.chartArea.top + chart.chartArea.bottom) / 2
textY = height;

使用 chartArea 更正确。否则，您的文本将忽略图例的高度并位于错误的位置。

【讨论】：