Question

如何使用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
        }
      }
    });
  }

Answer 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();
    }
});

<强>ᴅᴇᴍᴏ

＆＃13;

// 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
        }
    }
});

＆＃13;

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

＆＃13;

Answer 2

如果你们想添加图例。您应该使用

更改高度

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

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

使用Chart.js和Angular2，Ionic2在圆环图中的文本

2 个答案: