Блог

я создаю веб-страницу JavaScript с двумя диаграммами пончиков. для создания диаграмм я использую одну функцию и вызываю ее дважды с разными данными для каждой диаграммы. однако, когда я это делаю, текст в середине диаграммы пончика изменяется для обеих диаграмм, а не только для текущей. как я могу написать текст отдельно для каждого? это мой код

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

введите описание изображения здесь

Вы должны поместить Chart.pluginService.register вне chart функции, убедившись, что она вызывается только один раз.

Пожалуйста, взгляните на ваш исправленный код и посмотрите, как он работает.

 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>