每個數據顯示標籤的折線圖

Question

點我用chart.js之渲染的折線圖。我使用多個數據集，而數據集只包含一個數據點（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); 
     } 
     }); 
    } 
    } 
});