如何为图表 js 使用内联插件内部标题? [英] how can i use inline plugin inner title for chart js?

问题描述

我正在创建一个带有两个圆环图的 JavaScript 网页.为了创建图表，我使用一个函数并使用每个图表的不同数据调用它两次.但是，当我这样做时，圆环图中间的文本正在更改为两个图表，而不仅仅是当前一个.我怎样才能为每个单独编写文本?这是我的代码

功能图(dummynames, dummyValues, dummyColors, percent, id) {//虚拟名称、虚拟值和虚拟颜色是数组新图表(document.getElementById(id)，{类型:'甜甜圈'，数据: {标签:假名，数据集:[{标签:测试者"，背景颜色:dummyColors，数据:dummyValues，}]},选项: {标题: {显示:真，居中对齐'，水平对齐:中心"，垂直对齐:底部"，dockInsidePlotArea: 真},传奇: {显示:假},cutoutPercentage: 70,},});Chart.pluginService.register({beforeDraw:函数(图表){var 宽度 = chart.chart.width,高度 = chart.chart.height + 35，ctx = 图表.chart.ctx;ctx.restore();var fontSize = (height/200).toFixed(2);ctx.font = fontSize + "em sans-serif";ctx.textBaseline = 中间"；var text = 百分比，textX = Math.round((width - ctx.measureText(text).width)/2),textY = 高度/2；ctx.fillText(文本, textX, textY);ctx.save();}})}

在此处输入图片描述

解决方案

您应该将 Chart.pluginService.register 放在 chart 函数之外，从而确保它只调用一次.

请查看您修改后的代码，看看它是如何工作的.

Chart.pluginService.register({beforeDraw:函数(图表){var 宽度 = chart.chart.width,高度 = chart.chart.height + 35，ctx = 图表.chart.ctx;ctx.save();var fontSize = (height/200).toFixed(2);ctx.font = fontSize + "em sans-serif";ctx.textBaseline = "中间";var text = chart.data.datasets[0].percentage,textX = Math.round((width - ctx.measureText(text).width)/2),textY = 高度/2；ctx.fillText(文本, textX, textY);ctx.restore();}});功能图表(dummynames，dummyValues，dummyColors，百分比，id){新图表(document.getElementById(id)，{类型:'甜甜圈'，数据: {标签:假名，数据集:[{标签:测试者"，背景颜色:dummyColors，数据:dummyValues，百分比:百分比}]},选项: {标题: {显示:真，居中对齐'，水平对齐:中心"，垂直对齐:底部"，dockInsidePlotArea: 真},传奇: {显示:假},cutoutPercentage: 70,},});}chart(['A', 'B'], [5, 6], ['red', 'blue'], '26.846%', 'myChart1');图表(['X', 'Y'], [7, 5], ['green', 'purple'], '19.451%', 'myChart2');

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></脚本><div style="display: flex">
<canvas id="myChart1"></canvas></div>
<canvas id="myChart2"></canvas></div></div>

i am creating a JavaScript web page with two doughnut charts. to create the charts i'm using one function and calling it twice with different data for each chart. however when i do that the text in the middle of the doughnut chart is being changed for both charts not only for current one. how can i write the text individually for each? this is my code

function chart(dummynames, dummyValues, dummyColors, percentage, id) {
  //dummy names, dummy values and dummy colors are arrays

  new Chart(document.getElementById(id), {
    type: 'doughnut',
    data: {
      labels: dummynames,
      datasets: [{
        label: "tessers",
        backgroundColor: dummyColors,
        data: dummyValues,
      }]
    },
    options: {
      title: {
        display: true,
        align: 'center',
        horizontalAlign: "center",
        verticalAlign: "bottom",
        dockInsidePlotArea: true
      },
      legend: {
        display: false
      },
      cutoutPercentage: 70,
    },
  });

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

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

      var text = percentage,
        textX = Math.round((width - ctx.measureText(text).width) / 2),
        textY = height / 2;

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

enter image description here

解决方案

You should place Chart.pluginService.register outside of the chart function, thus making sure that it is invoked once only.

Please take a look at your amended code and see how it works.

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

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

    var text = chart.data.datasets[0].percentage,
      textX = Math.round((width - ctx.measureText(text).width) / 2),
      textY = height / 2;

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

function chart(dummynames, dummyValues, dummyColors, percentage, id) {
  new Chart(document.getElementById(id), {
    type: 'doughnut',
    data: {
      labels: dummynames,
      datasets: [{
        label: "tessers",
        backgroundColor: dummyColors,
        data: dummyValues,
        percentage: percentage
      }]
    },
    options: {
      title: {
        display: true,
        align: 'center',
        horizontalAlign: "center",
        verticalAlign: "bottom",
        dockInsidePlotArea: true
      },
      legend: {
        display: false
      },
      cutoutPercentage: 70,
    },
  });
}

chart(['A', 'B'], [5, 6], ['red', 'blue'], '26.846%', 'myChart1');
chart(['X', 'Y'], [7, 5], ['green', 'purple'], '19.451%', 'myChart2');

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<div style="display: flex">
  <div>
    <canvas id="myChart1"></canvas>
  </div>
  <div>
    <canvas id="myChart2"></canvas>
  </div>
</div>

这篇关于如何为图表 js 使用内联插件内部标题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！