小编jak*_*lar的帖子

我在带有chart.js的网页上显示一个甜甜圈图，甜甜圈中心有一些文本。问题在于在同一页面上添加多个甜甜圈图表时。中心文本在所有图表上重叠。

结果看起来像这个带有重叠文本的甜甜圈图

这是一个小提琴：https : //jsfiddle.net/jaklar/ng1y18yo/1/

HTML代码：

`

<table>
    <tr>
            <td><canvas id="myChart1" width="150" height="150"></canvas></td>
            <td><canvas id="myChart2" width="150" height="150"></canvas></td>
        </tr>
  <table>

`

javascript

'

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

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

Chart.pluginService.register({
  beforeDraw: function(chart) {
    var width …