如何使自定义文本出现在 chartjs 条形图中每个条形图的下方？

Question

在图表 js 条形图中，是否可以在每个条形图下方准确地放置自定义文本？在下面的图片中，第一个正确，第二个不正确。

您可以在此处查看演示 demo

有什么帮助吗？

Answer 1

我不太明白你为什么要在 xAxes 上重复标签，但这可以用 Plugin Core API 来完成。 API 提供了可用于执行自定义代码的不同挂钩。在您的情况下，您可以使用 afterDraw 挂钩直接在 canvas.

上绘制文本

插件定义如下：

const plugins = [{
  afterDraw: chart => {
    var ctx = chart.chart.ctx;
    ctx.save();
    var xAxis = chart.scales["x-axis-0"];
    var yAxis = chart.scales["y-axis-0"];
    xAxis.ticks.forEach((v, i) => {
      var x = xAxis.getPixelForTick(i);
      var value = chart.data.datasets[0].data[i];
      ctx.textAlign = "center";
      ctx.font = "18px Arial";
      ctx.fillStyle = value < 0 ? "#fc3e78" : "#53b300";
      ctx.fillText(value, x, yAxis.bottom + 80);
      ctx.fillText(likeslabels[i][0], x, yAxis.bottom + 100);
    });
    ctx.restore();
  }
}];

然后告诉 Bar 元素要使用的插件。

<Bar
      ref={barRef}
      data={likesdata}
      plugins={plugins}  // add this line
      width={75}
      height={20}
      options={likesoptions}
/>

同时通过在图表选项中定义 layout.padding.bottom 在图表底部添加一些额外的 space，否则文本将不可见。

const likesoptions = {
  layout: {
    padding: {
      bottom: 60
    }
  },

请查看您修改后的CodeSandbox。

如何使自定义文本出现在 chartjs 条形图中每个条形图的下方？

How to make custom text appear underneath each bar in chartjs bar chart?

reactjs

chart.js

react-chartjs