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

Question

在图表js条形图中，是否有可能在每个条形的正下方都有自定义文本？在下面的图像中，第一个正确，第二个不正确。

您可以在此处查看演示demo

请帮忙吗？

Answer 1

我不完全理解为什么要重复xAxes上的标签，但是可以使用Plugin Core API完成。 API提供了可用于执行自定义代码的不同钩子。您可以使用afterDraw钩子直接在画布上绘制文本。

该插件的定义如下：

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);
      ctx.textAlign = "center";
      ctx.font = "18px Arial";
      ctx.fillStyle = "#53b300";
      var value = chart.data.datasets[0].data[i];
      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在图表底部添加一些额外的空间，否则文本将不可见。

layout.padding.bottom

请查看您修改后的

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

。