Question

如何在ChartJS中显示悬停部分的相应数据项？它最初不应显示任何内容，而是悬停时应显示在中心的甜甜圈对应部分的数据项。像这样： https://giphy.com/gifs/pj3umMCJnx3yGUneis/fullscreen

Answer 1

如果您可以共享一些对您很有帮助的代码，但是没有使用Chart.js，我进行了一些搜索，发现了这一点：

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 = "75%",
        textX = Math.round((width - ctx.measureText(text).width) / 2),
        textY = height / 2;

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

希望这会有所帮助！

在甜甜圈中心显示文本

1 个答案: