如何使用 Chart.js 显示折线图数据集点标签? [英] How to display Line Chart dataset point labels with Chart.js?

查看：57
本文介绍了如何使用 Chart.js 显示折线图数据集点标签?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的设计要求是显示包含 5 个趋势数据数据集的折线图.沿着笔划线的每个数据值都需要在其各自的数据点处显示一个数据值标签.

很遗憾，我在 Charts.js 中找不到满足此要求的选项.

有什么解决方法可以帮助我吗?

我也在 fiddle 上发布了这个:http://jsfiddle.net/s9eannLh/

非常感谢！

 var 数据 = {标签:["","Jun 2013","Jul 2013","Aug 2013","Sep 2013","Oct 2013","Nov 2013","Dec 2013","Jan 2014","Feb 2014","2014 年 3 月","2014 年 4 月","2014 年 5 月"],数据集:[{标签:血红蛋白_1"，标题:测试"，填充颜​​色:透明"，strokeColor: "#65204c",点颜色:#65204c"，pointHighlightStroke: "#FFF",数据:[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]},{标签:血红蛋白_2"，填充颜​​色:透明"，strokeColor: "#ed7141",点颜色:#ed7141"，pointHighlightStroke: "#FFF",数据:[null,15.5,15.5,15.6,15.2,15.6,15.1,15.8,17,17.4,16.8,16.4,16.4]},{标签:血红蛋白_3"，填充颜​​色:透明"，strokeColor: "#de4760",点颜色:#de4760"，pointHighlightStroke: "#FFF",数据:[null,37.1,37,37.2,37.6,36.9,37.6,36.8,37.6,38,37.5,39.1,37.5]},{标签:血红蛋白_4"，填充颜​​色:透明"，strokeColor: "#fdcf7e",点颜色:#fdcf7e"，pointHighlightStroke: "#FFF",数据:[null,29.9,30.4,29.5,29.6,30.2,29.4,29.8,26.9,27,28.5,26.8,28.5]},{标签:血红蛋白_5"，填充颜​​色:透明"，strokeColor: "#a33a59",点颜色:#a33a59"，pointHighlightStroke: "#FFF",数据:[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]}]};变量选项 = {响应:真实，规模覆盖:真，scaleSteps: 10,scaleStepWidth: 5,scaleStartValue: 0,显示工具提示:假，点点:真实，点点半径:6，数据集StrokeWidth : 3,贝塞尔曲线:假，scaleShowHorizo​​ntalLines: 假，scaleGridLineWidth : 2,scaleGridLineColor : "#EEEEEE",比例线宽度:3，scaleLineColor: "#000000",scaleFontFamily: '"Gotham Book", sans-serif',比例字体大小:18}var ctx = $("#myChart").get(0).getContext("2d");var Trends = new Chart(ctx).Line(data, options);

解决方案

我终于找到了这个问题的解决方案.

我意识到我可以访问 DOM 中的图表对象:

Trends.datasets

在五个数据集中的每一个中都有一个包含 x & 的点对象.y 位置:

Trends.datasets[0..4].points

所以我使用 Chart.js 中的全局配置函数通过回调解析这些点:

//功能 - 将在动画进程中触发.onAnimationProgress: function(){},//功能 - 将在动画完成时触发.onAnimationComplete: function(){}

我发现我必须将 onAnimationComplete 与 responsive: true 一起使用，因为点标签会在调整大小事件时消失.

找到回调中的点后，我只需在画布上写下我想要的标签.

我对代码的补充是:

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

增加的功能:

 函数 drawDatasetPointsLabels() {ctx.font = '.9rem "Gotham Book",sans-serif';ctx.fillStyle = '#AAA';ctx.textAlign="中心";$(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);}});});}

这里是完整的代码源以及提供解决方案的新代码:

 var 数据 = {标签:["","Jun 2013","Jul 2013","Aug 2013","Sep 2013","Oct 2013","Nov 2013","Dec 2013","Jan 2014","Feb 2014","2014 年 3 月","2014 年 4 月","2014 年 5 月"],数据集:[{标签:血红蛋白_1"，填充颜​​色:透明"，strokeColor: "#65204c",点颜色:#65204c"，pointHighlightStroke: "#FFF",数据:[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]},{标签:血红蛋白_2"，填充颜​​色:透明"，strokeColor: "#ed7141",点颜色:#ed7141"，pointHighlightStroke: "#FFF",数据:[null,15.5,15.5,15.6,15.2,15.6,15.1,15.8,17,17.4,16.8,16.4,16.4]},{标签:血红蛋白_3"，填充颜​​色:透明"，strokeColor: "#de4760",点颜色:#de4760"，pointHighlightStroke: "#FFF",数据:[null,37.1,37,37.2,37.6,36.9,37.6,36.8,37.6,38,37.5,39.1,37.5]},{标签:血红蛋白_4"，填充颜​​色:透明"，strokeColor: "#fdcf7e",点颜色:#fdcf7e"，pointHighlightStroke: "#FFF",数据:[null,29.9,30.4,29.5,29.6,30.2,29.4,29.8,26.9,27,28.5,26.8,28.5]},{标签:血红蛋白_5"，填充颜​​色:透明"，strokeColor: "#a33a59",点颜色:#a33a59"，pointHighlightStroke: "#FFF",数据:[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]}]};变量选项 = {响应:真实，规模覆盖:真，scaleSteps: 10,scaleStepWidth: 5,scaleStartValue: 0,显示工具提示:假，点点:真实，点点半径:6，数据集StrokeWidth : 3,贝塞尔曲线:假，scaleShowHorizo​​ntalLines: 假，scaleGridLineWidth : 2,scaleGridLineColor : "#EEEEEE",比例线宽度: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);函数 drawDatasetPointsLabels() {ctx.font = '.9rem "Gotham Book",sans-serif';ctx.fillStyle = '#AAA';ctx.textAlign="中心";$(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);}});});}

这是 jsfiddle 上有问题的原始版本:http://jsfiddle.net/s9eannLh

[更新链接]这是 jsfiddle 的更新解决方案:https://jsfiddle.net/s9eannLh/82/

谢谢大家！

I have a design requirement to display a line chart with 5 datasets of trends data. Each data value along the stroke lines need to be showing a data value label at its respective data point.

Unfortunately, I cannot find an option within Charts.js that will satisfy this requirement.

Is there a workaround that can help me out?

I've posted this on fiddle too: http://jsfiddle.net/s9eannLh/

Thanks so much!

    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);

解决方案

I was able to finally find the solution to this question.

I realized I had access to the chart object within the DOM:

Trends.datasets

Within each of the five datasets there was a points object containing x & y positions:

Trends.datasets[0..4].points

So I parsed through the points with a callback utilizing the global configuration functions in Chart.js:

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

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

I found that I had to use onAnimationComplete with responsive: true because the point labels would get wiped out on a resize event.

Once I found the points within the callback, I simply wrote the labels I wanted onto the canvas.

My additions to the code were: 

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

With the added function:

    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);
                    }
                });
            });         
         }

So here is the entire code source along with the new code providing the solution: 

    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);
                    }
                });
            });         
        }

Here is the original problematic version on jsfiddle: http://jsfiddle.net/s9eannLh

[Updated link] And here is the updated solution on jsfiddle: https://jsfiddle.net/s9eannLh/82/

Thanks all!

这篇关于如何使用 Chart.js 显示折线图数据集点标签?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆