Chart.js 图表JS为点传入自定义数据

我正在尝试创建一个折线图插件，它将在某些点下绘制参考字母。为此，插件使用自定义afterDatasetsDraw函数来执行绘图。然而，我无法找到一种方法来传递所需分数的参考字母。下面是我试图用红色圆圈字母实现的一个例子

有没有人知道如何传递相应点的参考字母

---

谢谢。

我将为您的新插件定义一些配置属性，并使用其中一个属性来定义点引用的位置和引用值

这是我的意思的一个例子。这将在图表的

options

属性中

pointReferenceLetters: {
  display: true,
  fontColor: 'green',
  references: [
    {datasetIndex: 0, dataIndex: 1, reference: 'A'},
    {datasetIndex: 1, dataIndex: 2, reference: 'B'},
  ]
}

然后插件将使用这些数据绘制点引用。下面是一个示例，演示插件如何使用这些数据。注意，我只是做了一个快速的实现来展示这个概念，这个插件并不像你的插件那样画参考圈

Chart.plugins.register({
  afterDraw: function(chartInstance) {
    if (chartInstance.config.options.pointReferenceLetters || chartInstance.config.options.pointReferenceLetters.display) {
      var references = chartInstance.config.options.pointReferenceLetters.references || [];
      var helpers = Chart.helpers;
      var ctx = chartInstance.chart.ctx;
      var fontColor = helpers.getValueOrDefault(chartInstance.config.options.pointReferenceLetters.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, dsindex) {
        for (var i = 0; i < dataset.data.length; i++) {
          // note, many browsers don't support the array.find() function.
          // if you use this then be sure to provide a pollyfill
          var refPoint = references.find(function(e) {
            return e.datasetIndex == dsindex && e.dataIndex === i
          });

          if (refPoint) {         
            var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
            ctx.fillText(refPoint.reference, model.x, model.y + 30);
          }
        }
      });
    }
  }
});

Chart.plugins.register({
afterDraw:函数（chartInstance）{
if（chartInstance.config.options.pointReferenceleters | | chartInstance.config.options.pointReferenceleters.display）{
var references=chartInstance.config.options.pointreferenceleters.references | | |[]；
var helpers=Chart.helpers；
var ctx=chartInstance.chart.ctx；
var fontColor=helpers.getValueOrDefault（chartInstance.config.options.pointReferenceleters.fontColor、chartInstance.config.options.defaultFontColor）；
//在条形图上方呈现图表的值
ctx.font=Chart.helpers.fontString（Chart.defaults.global.defaultFontSize+5，'normal'，Chart.defaults.global.defaultFontFamily）；
ctx.textAlign='中心'；
ctx.textb基线='底部'；
ctx.fillStyle=fontColor；
chartInstance.data.datasets.forEach（函数（dataset，dsindex）{
对于（var i=0；i

如您所见，插件使用

pointreferenceleters.references

属性中提供的数据来确定何时绘制点引用，然后使用提供的值作为引用文本

下面是一个演示所有这些的例子