Question

我有两个图表，每个图表都会显示一个月的数据，标题显示图表显示的月份。但它在两张图表中显示了两个月的头衔，On Eachother。我想知道是否有人设法在右侧图表的中间显示想要的文本。 Demo

<canvas id="myChart"></canvas>
<canvas id="myChart1"></canvas>

<script type="javascript">
    var data = {
        labels: [
            "White",
            "Blue",
            "Yellow"
        ],
        datasets: [{
            data: [300, 50, 100],
            backgroundColor: ["#FFF", "#36A2EB", "#FFCE56"],
            hoverBackgroundColor: ["#FFF", "#36A2EB", "#FFCE56"]
        }]
    };

    var DeliveryChart = new Chart(document.getElementById('myChart'), {
        type: 'doughnut',
        elementById: ('myChart'),
        data: data,
        options: {responsive: true, legend: {display: false}}
    });

    Chart.pluginService.register({
        beforeDraw: function (chart) {
            var width = chart.chart.width, height = chart.chart.height, ctx = chart.chart.ctx;
            ctx.restore();

            var fontSize = (height / 114).toFixed(2);
            ctx.font = fontSize + "em sans-serif";
            ctx.textBaseline = "middle";

            var text = "Oktober",
                textX = Math.round((width - ctx.measureText(text).width) / 2),
                textY = height / 2;
            ctx.fillText(text, textX, textY);
            ctx.save();
        }
    });

    var data = {
        labels: ["Red", "Blue", "Yellow"],
        datasets: [{
            data: [300, 50, 100],
            backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
            hoverBackgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"]
        }]
    };

    var promisedDeliveryChart = new Chart(document.getElementById('myChart1'), {
        type: 'doughnut',
        elementById: ['myChart1'],
        data: data,
        options: {responsive: true, legend: {display: false}}
    });

    Chart.pluginService.register({
        beforeDraw: function (chart) {
            var width = chart.chart.width,
                height = chart.chart.height,
                ctx = chart.chart.ctx;
            ctx.restore();

            var fontSize = (height / 114).toFixed(2);
            ctx.font = fontSize + "em sans-serif";
            ctx.textBaseline = "middle";

            var text = "November",
                textX = Math.round((width - ctx.measureText(text).width) / 2),
                textY = height / 2;
            ctx.fillText(text, textX, textY);
            ctx.save();
        }
    });
</script>

Answer 1

我认为是因为你正在注册两个beforeDraw函数。这些不受特定图表的约束。如果您希望文本引用图表中的数据，则必须更新它才能使用图表对象中的数据。

要做到这一点，我已经为你传递的选项添加了标题（这样做的缺点是在每个甜甜圈上显示标题，但你可以解决这个问题）。然后onDraw函数使用该标题文本显示在甜甜圈的中心。

var promisedDeliveryChart = new Chart(document.getElementById('myChart1'), {
  type: 'doughnut',
  elementById:['myChart1'],
  data: data2,
  options: {
    responsive: true,
    legend: {
      display: false
    },
    title: {
            display: true,
            text: 'November'
        }
  }
});




Chart.pluginService.register({
  beforeDraw: function(chart) {
    var width = chart.chart.width,
        height = chart.chart.height,
        ctx = chart.chart.ctx;

    ctx.restore();
    var fontSize = (height / 114).toFixed(2);
    ctx.font = fontSize + "em sans-serif";
    ctx.textBaseline = "middle";
    console.log (chart.options.title.text);
    var text = chart.options.title.text;
        textX = Math.round((width - ctx.measureText(text).width) / 2),
        textY = height / 2;

    ctx.fillText(text, textX, textY);
    ctx.save();
  }
});

我已更新您的fiddle。

在2个不同的Doughuts chartjs中添加文本

1 个答案: