Question

我试图制作一个这样的图形： https://www.google.com/finance?q=BCBA:PAMP 我在chart.js中有一个折线图，现在我想为某些日期添加标签（如字母A，B，C）。找不到要从头开始的doc / example。任何的想法？如果它更容易与另一个图书馆做一个推荐是非常受欢迎的。谢谢！

Answer 1

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

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

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);
          }
        }
      });
    }
  }
});

它允许您使用此新配置配置要注释的点。 showOnly选项包含您要标记的点。

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

显然，这只会在指定点添加数据点值，但您只需更改插件即可绘制您想要显示的内容。只需用不同的代码替换ctx.fillText(dataset.data[i], model.x, yPos)即可在画布上呈现不同的内容。

这是codepen example，表明您希望它看起来像。

使用chart.js（或其他库）在轴上引用

1 个答案: