javascript - 使用 Chart.js 在一页上显示多个圆环图，文本居中

Question

我正在使用 chart.js 在网页上显示一个圆环图，在圆环的中心有一些文本。问题是在同一页面上添加多个圆环图时。中心文本重叠在所有图表上。

结果看起来像这样 doughnut chart with overlapping text

这是一个 fiddle :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 = 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 = "100%",
        textX = Math.round((width - ctx.measureText(text).width) / 2),
        textY = height / 2;

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

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

var promisedDeliveryChart = new Chart(document.getElementById('myChart2'), {
  type: 'doughnut',
  data: data,
  options: {
    responsive: true,
    cutoutPercentage: 75,
    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 = "9%",
        textX = Math.round((width - ctx.measureText(text).width) / 2),
        textY = height / 2;

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

'

Answer 1

无需为不同的图表注册单独的插件。这可以通过为两个图表注册一个插件来实现。

此外，您的图表插件也有一些缺陷。这是插件的更正版本......

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 = chart.config.options.elements.center.text,
            textX = Math.round((width - ctx.measureText(text).width) / 2),
            textY = height / 2;
        ctx.fillText(text, textX, textY);
        ctx.save();
    }
});

您还需要为两个图表设置以下选项...

elements: {
    center: {
        text: '50%' //set as you wish
    }
}

ᴅᴇᴍᴏ

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 = chart.config.options.elements.center.text,
            textX = Math.round((width - ctx.measureText(text).width) / 2),
            textY = height / 2;
        ctx.fillText(text, textX, textY);
        ctx.save();
    }
});

// chart1
var data = {
    labels: ["Red", "Blue"],
    datasets: [{
        data: [50, 50],
        backgroundColor: ["#FF6384", "#36A2EB"],
        hoverBackgroundColor: ["#FF6384", "#36A2EB"]
    }]
};
var promisedDeliveryChart = new Chart(document.getElementById('myChart1'), {
    type: 'doughnut',
    data: data,
    options: {
        elements: {
            center: {
                text: '50%'  //set as you wish
            }
        },
        cutoutPercentage: 75,
        legend: {
            display: false
        }
    }
});

// chart2
var data = {
    labels: ["Red", "Blue"],
    datasets: [{
        data: [75, 25],
        backgroundColor: ["#FF6384", "#36A2EB"],
        hoverBackgroundColor: ["#FF6384", "#36A2EB"]
    }]
};
var promisedDeliveryChart = new Chart(document.getElementById('myChart2'), {
    type: 'doughnut',
    data: data,
    options: {
        elements: {
            center: {
                text: '75%'  //set as you wish
            }
        },
        cutoutPercentage: 75,
        legend: {
            display: false
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<table>
    <tr>
        <td><canvas id="myChart1" width="150" height="150"></canvas></td>
        <td><canvas id="myChart2" width="150" height="150"></canvas></td>
    </tr>
<table>