各データポイントのラベルを折れ線グラフで表示

Question

Chart.jsでレンダリングした折れ線グラフを使用します。私は複数のデータセットを使用しますが、データセットは1つのデータポイント（x、y）のみ（ビジネスドメインから与えられます）で構成されています。

グラフには、各ポイント（x、y、ラベル）の情報が表示されますが、デフォルトで/各ラベルの横にラベルが表示されます。

研究中に解決策が見つかりませんでした。

任意のポインタ？実際にChart.jsで達成することは可能ですか？

Answer 1

plugins APIを使用してchart.jsでこれを行うことができます。ここでは、チャートをレンダリングするときに、すべてのデータポイントのラベルを表示するためにプロダクションで使用するプラグインの例を示します。

現在、棒グラフのみを使用しているため、折れ線グラフの一部を調整する必要があります。また、私はshowDatapointsという新しいオプションプロパティを追加しました。このプロパティは、特定のグラフでプラグインを使用するためにtrueに設定できます。

Chart.plugins.register({ 
    afterDraw: function(chartInstance) { 
    if (chartInstance.config.options.showDatapoints) { 
     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, '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++) { 
      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); 
     } 
     }); 
    } 
    } 
});