Charts 使用chart.js（或其他库）在axis中引用

我正在尝试制作这样的图表： 我在chart.js中有一个折线图，现在我想为某些日期添加标签（如字母a、B、C）。 找不到要从中开始的文档/示例。有什么想法吗？ 如果使用另一个库更简单，那么推荐是非常受欢迎的。

---

谢谢

不幸的是，chart.js中没有您想要的本机支持。但是，您当然可以使用插件接口添加此功能。这要求您实现自己的逻辑，在需要的位置绘制画布像素。这听起来可能很有挑战性，但比听起来容易

下面是一个示例插件，它将在图表中的特定点上方添加一个值（基于配置）

显然，这只会在指定的点添加datapoint值，但是您可以将插件更改为绘制您想要显示的任何内容。只需用不同的代码替换

ctx.fillText（dataset.data[i]，model.x，yPos）

，即可在画布上呈现不同的内容

---

这是一个显示您想要的外观的示例。

它也可以是这样：不需要文本，只需要带有不同字母的标记。太好了！我试试这个。非常感谢。

Chart.plugins.register({
  afterDraw: function(chartInstance) {
    if (chartInstance.config.options.showDatapoints || chartInstance.config.options.showDatapoints.display) {
      var showOnly = chartInstance.config.options.showDatapoints.showOnly || [];
      var helpers = Chart.helpers;
      var ctx = chartInstance.chart.ctx;
      var fontColor = helpers.getValueOrDefault(chartInstance.config.options.showDatapoints.fontColor, chartInstance.config.options.defaultFontColor);

      // render the value of the chart above the bar
      ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize + 5, 'normal', Chart.defaults.global.defaultFontFamily);
      ctx.textAlign = 'center';
      ctx.textBaseline = 'bottom';
      ctx.fillStyle = fontColor;

      chartInstance.data.datasets.forEach(function (dataset) {
        for (var i = 0; i < dataset.data.length; i++) {
          if (showOnly.includes(dataset.data[i])) {
            var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
            var scaleMax = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._yScale.maxHeight;
            var yPos = (scaleMax - model.y) / scaleMax >= 0.93 ? model.y + 20 : model.y - 5;
            ctx.fillText(dataset.data[i], model.x, yPos);
          }
        }
      });
    }
  }
});

options: {
  showDatapoints: {
    display: true,
    showOnly: [3, 10, 9]
  },
}