如何使用Chart.js顯示折線圖數據集點標籤？

我有一個設計需求來顯示包含5個趨勢數據數據集的折線圖。沿着筆劃線的每個數據值需要在其各自的數據點處顯示數據值標籤。如何使用Chart.js顯示折線圖數據集點標籤？

不幸的是，我無法在Charts.js中找到滿足此要求的選項。

有沒有可以幫助我的解決方法？

非常感謝！

var data = { 
       labels: ["","Jun 2013","Jul 2013","Aug 2013","Sep 2013","Oct 2013","Nov 2013","Dec 2013","Jan 2014","Feb 2014","Mar 2014","Apr 2014","May 2014"], 
       datasets: [ 
        { 
         label: "hemoglobin_1", 
         title: "test", 
         fillColor: "transparent", 
         strokeColor: "#65204c", 
         pointColor: "#65204c", 
         pointHighlightStroke: "#FFF", 
         data: [null,5.7,5.7,5.8,5.7,5.8,5.7,5.9,6.7,6.7,6.5,6.4,6.4] 
        }, 
        { 
         label: "hemoglobin_2", 
         fillColor: "transparent", 
         strokeColor: "#ed7141", 
         pointColor: "#ed7141", 
         pointHighlightStroke: "#FFF", 
         data: [null,15.5,15.5,15.6,15.2,15.6,15.1,15.8,17,17.4,16.8,16.4,16.4] 
        },      
        { 
         label: "hemoglobin_3", 
         fillColor: "transparent", 
         strokeColor: "#de4760", 
         pointColor: "#de4760", 
         pointHighlightStroke: "#FFF", 
         data: [null,37.1,37,37.2,37.6,36.9,37.6,36.8,37.6,38,37.5,39.1,37.5] 
        }, 
        { 
         label: "hemoglobin_4", 
         fillColor: "transparent", 
         strokeColor: "#fdcf7e", 
         pointColor: "#fdcf7e",       
         pointHighlightStroke: "#FFF", 
         data: [null,29.9,30.4,29.5,29.6,30.2,29.4,29.8,26.9,27,28.5,26.8,28.5] 
        },           
        { 
         label: "hemoglobin_5", 
         fillColor: "transparent", 
         strokeColor: "#a33a59", 
         pointColor: "#a33a59", 
         pointHighlightStroke: "#FFF", 
         data: [null,11.8,11.4,11.9,11.9,11.5,12.2,11.7,11.8,10.9,10.7,11.3,11.3] 
        } 
       ] 
      }; 

      var options = { 
       responsive: true, 
       scaleOverride: true, 
       scaleSteps: 10, 
       scaleStepWidth: 5, 
       scaleStartValue: 0, 
       showTooltips: false, 
       pointDot: true, 
       pointDotRadius : 6, 
       datasetStrokeWidth : 3, 
       bezierCurve : false, 
       scaleShowHorizontalLines: false, 
       scaleGridLineWidth : 2, 
       scaleGridLineColor : "#EEEEEE", 
       scaleLineWidth: 3, 
       scaleLineColor: "#000000", 
       scaleFontFamily: '"Gotham Book",sans-serif', 
       scaleFontSize: 18 
      } 

      var ctx = $("#myChart").get(0).getContext("2d"); 
      var Trends = new Chart(ctx).Line(data, options);

來源

2015-01-09 JBMcClure

我終於找到了解決這個問題的方法。

我意識到的DOM內訪問圖表對象：

Trends.datasets

在每個五個數據集有一個點對象包含x & y位置：

Trends.datasets[0..4].points

所以我利用Chart.js中的全局配置函數通過回調點解析：

// Function - Will fire on animation progression. 
    onAnimationProgress: function(){}, 

    // Function - Will fire on animation completion. 
    onAnimationComplete: function(){}

我發現我不得不使用onAnimationComplete和responsive: true，因爲點標籤會在resize事件中被清除。

一旦我找到了回調中的點，我只是簡單地將我想要的標籤寫在畫布上。

我的代碼添加爲：

var options = { 
    onAnimationProgress: function() { drawDatasetPointsLabels() }, 
    onAnimationComplete: function() { drawDatasetPointsLabels() } 
}

與添加的功能：

function drawDatasetPointsLabels() { 
      ctx.font = '.9rem "Gotham Book",sans-serif'; 
      ctx.fillStyle = '#AAA'; 
      ctx.textAlign="center"; 
      $(Trends.datasets).each(function(idx,dataset){ 
       $(dataset.points).each(function(pdx,pointinfo){ 
        // First dataset is shifted off the scale line. 
        // Don't write to the canvas for the null placeholder. 
        if (pointinfo.value !== null) { 
         ctx.fillText(pointinfo.value,pointinfo.x,pointinfo.y - 15); 
        } 
       }); 
      });   
     }

因此，這裏是用新的代碼提供的解決方案在整個代碼源：

var data = { 
       labels: ["","Jun 2013","Jul 2013","Aug 2013","Sep 2013","Oct 2013","Nov 2013","Dec 2013","Jan 2014","Feb 2014","Mar 2014","Apr 2014","May 2014"], 
       datasets: [ 
        { 
         label: "hemoglobin_1", 
         fillColor: "transparent", 
         strokeColor: "#65204c", 
         pointColor: "#65204c", 
         pointHighlightStroke: "#FFF", 
         data: [null,5.7,5.7,5.8,5.7,5.8,5.7,5.9,6.7,6.7,6.5,6.4,6.4] 
        }, 
        { 
         label: "hemoglobin_2", 
         fillColor: "transparent", 
         strokeColor: "#ed7141", 
         pointColor: "#ed7141", 
         pointHighlightStroke: "#FFF", 
         data: [null,15.5,15.5,15.6,15.2,15.6,15.1,15.8,17,17.4,16.8,16.4,16.4] 
        },      
        { 
         label: "hemoglobin_3", 
         fillColor: "transparent", 
         strokeColor: "#de4760", 
         pointColor: "#de4760", 
         pointHighlightStroke: "#FFF", 
         data: [null,37.1,37,37.2,37.6,36.9,37.6,36.8,37.6,38,37.5,39.1,37.5] 
        }, 
        { 
         label: "hemoglobin_4", 
         fillColor: "transparent", 
         strokeColor: "#fdcf7e", 
         pointColor: "#fdcf7e",       
         pointHighlightStroke: "#FFF", 
         data: [null,29.9,30.4,29.5,29.6,30.2,29.4,29.8,26.9,27,28.5,26.8,28.5] 
        },           
        { 
         label: "hemoglobin_5", 
         fillColor: "transparent", 
         strokeColor: "#a33a59", 
         pointColor: "#a33a59", 
         pointHighlightStroke: "#FFF", 
         data: [null,11.8,11.4,11.9,11.9,11.5,12.2,11.7,11.8,10.9,10.7,11.3,11.3] 
        } 
       ] 
      }; 

    var options = { 
       responsive: true, 
       scaleOverride: true, 
       scaleSteps: 10, 
       scaleStepWidth: 5, 
       scaleStartValue: 0, 
       showTooltips: false, 
       pointDot: true, 
       pointDotRadius : 6, 
       datasetStrokeWidth : 3, 
       bezierCurve : false, 
       scaleShowHorizontalLines: false, 
       scaleGridLineWidth : 2, 
       scaleGridLineColor : "#EEEEEE", 
       scaleLineWidth: 3, 
       scaleLineColor: "#000000", 
       scaleFontFamily: '"Gotham Book",sans-serif', 
       scaleFontSize: 18, 
       onAnimationProgress: function() { drawDatasetPointsLabels() }, 
       onAnimationComplete: function() { drawDatasetPointsLabels() }      
      } 
      var ctx = $("#myChart").get(0).getContext("2d"); 
      var Trends = new Chart(ctx).Line(data, options);    

     function drawDatasetPointsLabels() { 
      ctx.font = '.9rem "Gotham Book",sans-serif'; 
      ctx.fillStyle = '#AAA'; 
      ctx.textAlign="center"; 
      $(Trends.datasets).each(function(idx,dataset){ 
       // First dataset is shifted off the scale line. 
       // Don't write to the canvas for the null placeholder. 
       $(dataset.points).each(function(pdx,pointinfo){ 
        if (pointinfo.value !== null) { 
         ctx.fillText(pointinfo.value,pointinfo.x,pointinfo.y - 15); 
        } 
       }); 
      });   
     }

這是jsfiddle上的原始問題版本：http://jsfiddle.net/s9eannLh

[更新鏈接] 這裏是對的jsfiddle更新的解決方案：https://jsfiddle.net/s9eannLh/82/

謝謝大家！

來源

2015-01-15 07:37:06 JBMcClure

我有同樣的問題但你的鏈接演示似乎不起作用 – 2015-01-20 15:15:11

我發現我必須通過'趨勢'和'ctx' ob當用'$（document）.ready（）'包裝時，作爲參數的對象;'你在做什麼？ ** EDIT「** 例如： 'VAR選項= { onAnimationProgress：函數（）{drawDatasetPointsLabels（趨勢，CTX）}， onAnimationComplete：函數（）{drawDatasetPointsLabels（趨勢，CTX）} } function drawDatasetPointsLabels（Trends，ctx）{ //在這裏做東西... } – JBMcClure 2015-01-21 05:56:21

-1

爲@JBMcClure解決方案更新代碼：

 var data = { 
      labels: ["","Jun 2013","Jul 2013","Aug 2013","Sep 2013","Oct 2013","Nov 2013","Dec 2013","Jan 2014","Feb 2014","Mar 2014","Apr 2014","May 2014"], 
      datasets: [ 
       { 
        label: "hemoglobin_1", 
        fillColor: "transparent", 
        strokeColor: "#65204c", 
        pointColor: "#65204c", 
        pointHighlightStroke: "#FFF", 
        data: [null,5.7,5.7,5.8,5.7,5.8,5.7,5.9,6.7,6.7,6.5,6.4,6.4] 
       }, 
       { 
        label: "hemoglobin_2", 
        fillColor: "transparent", 
        strokeColor: "#ed7141", 
        pointColor: "#ed7141", 
        pointHighlightStroke: "#FFF", 
        data: [null,15.5,15.5,15.6,15.2,15.6,15.1,15.8,17,17.4,16.8,16.4,16.4] 
       }, 
       { 
        label: "hemoglobin_3", 
        fillColor: "transparent", 
        strokeColor: "#de4760", 
        pointColor: "#de4760", 
        pointHighlightStroke: "#FFF", 
        data: [null,37.1,37,37.2,37.6,36.9,37.6,36.8,37.6,38,37.5,39.1,37.5] 
       }, 
       { 
        label: "hemoglobin_4", 
        fillColor: "transparent", 
        strokeColor: "#fdcf7e", 
        pointColor: "#fdcf7e", 
        pointHighlightStroke: "#FFF", 
        data: [null,29.9,30.4,29.5,29.6,30.2,29.4,29.8,26.9,27,28.5,26.8,28.5] 
       }, 
       { 
        label: "hemoglobin_5", 
        fillColor: "transparent", 
        strokeColor: "#a33a59", 
        pointColor: "#a33a59", 
        pointHighlightStroke: "#FFF", 
        data: [null,11.8,11.4,11.9,11.9,11.5,12.2,11.7,11.8,10.9,10.7,11.3,11.3] 
       } 
      ] 
     }; 

     var options = { 
      type: 'line', 
      data: data, 
      options: { 
       responsive: true, 
       scaleOverride: true, 
       scaleSteps: 10, 
       scaleStepWidth: 5, 
       scaleStartValue: 0, 
       showTooltips: false, 
       pointDot: true, 
       pointDotRadius : 6, 
       datasetStrokeWidth : 3, 
       bezierCurve : false, 
       scaleShowHorizontalLines: false, 
       scaleGridLineWidth : 2, 
       scaleGridLineColor : "#EEEEEE", 
       scaleLineWidth: 3, 
       scaleLineColor: "#000000", 
       scaleFontFamily: '"Gotham Book",sans-serif', 
       scaleFontSize: 18, 
       onAnimationProgress: function() { drawDatasetPointsLabels() }, 
       onAnimationComplete: function() { drawDatasetPointsLabels() } 
      } 
     }; 
     var ctx = document.getElementById('myChart').getContext('2d'); 
     var Trends = new Chart(ctx, options); 

     function drawDatasetPointsLabels() { 
      ctx.font = '.9rem "Gotham Book",sans-serif'; 
      ctx.fontWeight = 'bold'; 
      ctx.fillStyle = '#AAA'; 
      ctx.textAlign="center"; 
      $(Trends.datasets).each(function(idx,dataset){ 
       $(dataset.points).each(function(pdx,pointinfo){ 
        if (pointinfo.value !== null) { 
         ctx.fillText(pointinfo.value,pointinfo.x,pointinfo.y - 15); 
        } 
       }); 
      }); 
     }

@JBMcClure這裏是一個更新的工作環節：

https://jsfiddle.net/s9eannLh/177/

來源

2017-10-03 15:55:29

下面介紹如何根據提供在github的例子來做到這一點。它看起來類似於您的解決方案...

// Define a plugin to provide data labels 
Chart.plugins.register({ 
    afterDatasetsDraw: function(chart, easing) { 
     // To only draw at the end of animation, check for easing === 1 
     var ctx = chart.ctx; 
     chart.data.datasets.forEach(function (dataset, i) { 
      var meta = chart.getDatasetMeta(i); 
      if (!meta.hidden) { 
       meta.data.forEach(function(element, index) { 
        // Draw the text in black, with the specified font 
        ctx.fillStyle = 'rgb(0, 0, 0)'; 
        var fontSize = 16; 
        var fontStyle = 'normal'; 
        var fontFamily = 'Helvetica Neue'; 
        ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily); 
        // Just naively convert to string for now 
        var dataString = dataset.data[index].toString(); 
        // Make sure alignment settings are correct 
        ctx.textAlign = 'center'; 
        ctx.textBaseline = 'middle'; 
        var padding = 5; 
        var position = element.tooltipPosition(); 
        ctx.fillText(dataString, position.x, position.y - (fontSize/2) - padding); 
       }); 
      } 
     }); 
    } 
});

從代碼： https://github.com/chartjs/Chart.js/blob/master/samples/advanced/data-labelling.html

例子： http://www.chartjs.org/samples/latest/advanced/data-labelling.html

您也可以定義內置插件，以圖表，而不是全球...

var chart = new Chart(ctx, { 
    plugins: [{ 
     afterDatasetsDraw: ... 
    }] 
});

來源

2018-01-19 19:30:11 Cal

如何使用Chart.js顯示折線圖數據集點標籤？

回答

相關問題