チャートポイントのカスタムデータにJSが渡される

Question

ポイントの下に参照文字を描画する線グラフプラグインを作成しようとしています。そうするために、プラグインはカスタムafterDatasetsDraw関数を使用して描画を実行します。しかし、私は希望のポイントの参照文字を渡す方法を見つけることができません。以下は、私が赤い丸で囲んだ文字で達成しようとしているものの例です。

誰もが対応点の基準の手紙を渡す方法についてのアイデアを持っていますか？

ありがとうございました。

Answer 1

私はちょうどあなたの新しいプラグインのいくつかの構成プロパティを定義し、それらのプロパティの1つを使用して、ポイント参照をどこに置くべきか、および参照値を設定する場所を定義します。

ここに私が意味するものの例があります。これはチャートの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); 
      } 
     } 
     }); 
    } 
    } 
}); 

参照プラグイン点基準を描画した後、基準テキストとして提供される値を使用すべきときを決定するためにpointReferenceLetters.referencesプロパティで提供されたデータを使用します。

ここには、このすべてを示すcodepen exampleがあります。