jquery – 如何使用Chart.js显示折线图数据集点标签?

前端之家收集整理的这篇文章主要介绍了jquery – 如何使用Chart.js显示折线图数据集点标签?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

不幸的是,我无法在Charts.js中找到满足此要求的选项.

有没有可以帮助我的解决方法

我也把它发布在小提琴上:http://jsfiddle.net/s9eannLh/

非常感谢!

  1. var data = {
  2. 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: [
  3. {
  4. label: "hemoglobin_1",title: "test",fillColor: "transparent",strokeColor: "#65204c",pointColor: "#65204c",pointHighlightStroke: "#FFF",data: [null,5.7,5.8,5.9,6.7,6.5,6.4,6.4]
  5. },{
  6. label: "hemoglobin_2",strokeColor: "#ed7141",pointColor: "#ed7141",15.5,15.6,15.2,15.1,15.8,17,17.4,16.8,16.4,16.4]
  7. },{
  8. label: "hemoglobin_3",strokeColor: "#de4760",pointColor: "#de4760",37.1,37,37.2,37.6,36.9,36.8,38,37.5,39.1,37.5]
  9. },{
  10. label: "hemoglobin_4",strokeColor: "#fdcf7e",pointColor: "#fdcf7e",29.9,30.4,29.5,29.6,30.2,29.4,29.8,26.9,27,28.5,26.8,28.5]
  11. },{
  12. label: "hemoglobin_5",strokeColor: "#a33a59",pointColor: "#a33a59",11.8,11.4,11.9,11.5,12.2,11.7,10.9,10.7,11.3,11.3]
  13. }
  14. ]
  15. };
  16. var options = {
  17. 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
  18. }
  19. var ctx = $("#myChart").get(0).getContext("2d");
  20. var Trends = new Chart(ctx).Line(data,options);
最佳答案
我终于找到了这个问题的解决方案.

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

  1. Trends.datasets

在五个数据集中的每个数据集中,存在包含x&的点对象. y职位:

  1. Trends.datasets[0..4].points

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

  1. // Function - Will fire on animation progression.
  2. onAnimationProgress: function(){},// Function - Will fire on animation completion.
  3. onAnimationComplete: function(){}

我发现我必须在响应时使用onAnimationComplete:true,因为点标签会在resize事件中消失.

一旦我在回调中找到了点,我就会在画布上写下我想要的标签.

我对代码的补充是:

  1. var options = {
  2. onAnimationProgress: function() { drawDatasetPointsLabels() },onAnimationComplete: function() { drawDatasetPointsLabels() }
  3. }

增加功能

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

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

  1. var data = {
  2. labels: ["",11.3]
  3. }
  4. ]
  5. };
  6. var options = {
  7. responsive: true,scaleFontSize: 18,onAnimationProgress: function() { drawDatasetPointsLabels() },onAnimationComplete: function() { drawDatasetPointsLabels() }
  8. }
  9. var ctx = $("#myChart").get(0).getContext("2d");
  10. var Trends = new Chart(ctx).Line(data,options);
  11. function drawDatasetPointsLabels() {
  12. ctx.font = '.9rem "Gotham Book",dataset){
  13. // First dataset is shifted off the scale line.
  14. // Don't write to the canvas for the null placeholder.
  15. $(dataset.points).each(function(pdx,pointinfo){
  16. if ( pointinfo.value !== null ) {
  17. ctx.fillText(pointinfo.value,pointinfo.y - 15);
  18. }
  19. });
  20. });
  21. }

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

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

谢谢大家!

猜你在找的jQuery相关文章