图JS相同的标签，多数据

Question

嘿家伙感谢您的阅读，并帮助......

使用chart.js之我有图吧，我发现了JS提琴 这里同样是链接http://jsfiddle.net/uh9vw0ao/

var chartData = { 
    labels: ["January", "February", "March", "April", "May", "June"], 
    datasets: [ 
     { 
      fillColor: "#79D1CF", 
      strokeColor: "#79D1CF", 
      data: [60, 80, 81, 56, 55, 40] 
     } 
    ] 
}; 

var ctx = document.getElementById("myChart1").getContext("2d"); 
var myLine = new Chart(ctx).Line(chartData, { 
    showTooltips: false, 
    onAnimationComplete: function() { 

     var ctx = this.chart.ctx; 
     ctx.font = this.scale.font; 
     ctx.fillStyle = this.scale.textColor 
     ctx.textAlign = "center"; 
     ctx.textBaseline = "bottom"; 

     this.datasets.forEach(function (dataset) { 
      dataset.points.forEach(function (points) { 
       ctx.fillText(points.value, points.x, points.y - 10); 
      }); 
     }) 
    } 
}); 

var ctx = document.getElementById("myChart2").getContext("2d"); 
var myBar = new Chart(ctx).Bar(chartData, { 
    showTooltips: false, 
    onAnimationComplete: function() { 

     var ctx = this.chart.ctx; 
     ctx.font = this.scale.font; 
     ctx.fillStyle = this.scale.textColor 
     ctx.textAlign = "center"; 
     ctx.textBaseline = "bottom"; 

     this.datasets.forEach(function (dataset) { 
      dataset.bars.forEach(function (bar) { 
       ctx.fillText(bar.value, bar.x, bar.y - 5); 
      }); 
     }) 
    } 
}); 

问题是，我怎样才能添加现有的数据旁值，例如：

example please click..

三江源非常感谢！

Answer 1

一个非常快速和肮脏的方法是使用一个配对的阵列上，你想在同一个指数点disaply每个数据点

即var supportingData = [12, 14, 15, 16, 17, 26];

然后在onAnimation完整的使用值目前的数据集绘制出的数据的指数构成本阵的同时

dataset.bars.forEach(function(bar, index) { 
     //keep a refence of the fillstyle to change back to later 
     var ctxColour = ctx.fillStyle; 
     ctx.fillText(bar.value, bar.x, bar.y - 5); 
     ctx.fillStyle = "#FF0000"; 

     ctx.fillText("$" + supportingData[index], bar.x + (ctx.measureText(bar.value).width)+10, bar.y - 5); 
     //reset the fill style 
     ctx.fillStyle = ctxColour; 
}); 

，因为这是chartjs 1.x的，我不认为你给图表额外的数据传递给实际图所以如果你wa nted东西更好一点，你会需要扩展自己的图表，并允许它充分利用此额外的支持数据，而是用于显示将是相同的

var chartData = { 
 
    labels: ["January", "February", "March", "April", "May", "June"], 
 
    datasets: [{ 
 
    fillColor: "#79D1CF", 
 
    strokeColor: "#79D1CF", 
 
    data: [60, 80, 81, 56, 55, 40] 
 
    }] 
 
}; 
 
//add an array to have your paird data in 
 
var supportingData = [12, 14, 15, 16, 17, 26]; 
 

 
var ctx = document.getElementById("myChart2").getContext("2d"); 
 
var myBar = new Chart(ctx).Bar(chartData, { 
 
    showTooltips: false, 
 
    onAnimationComplete: function() { 
 

 
    var ctx = this.chart.ctx; 
 
    ctx.font = this.scale.font; 
 
    ctx.fillStyle = this.scale.textColor 
 
    ctx.textAlign = "center"; 
 
    ctx.textBaseline = "bottom"; 
 

 
    this.datasets.forEach(function(dataset) { 
 
     dataset.bars.forEach(function(bar, index) { 
 
     //keep a refence of the fillstyle to change back to later 
 
     var ctxColour = ctx.fillStyle; 
 
     ctx.fillText(bar.value, bar.x, bar.y - 5); 
 
     ctx.fillStyle = "#FF0000"; 
 
     
 
     ctx.fillText("$" + supportingData[index], bar.x + (ctx.measureText(bar.value).width)+10, bar.y - 5); 
 
     //reset the fill sty;e 
 
     ctx.fillStyle = ctxColour; 
 
     }); 
 
    }) 
 
    } 
 
});

<script src="https://rawgit.com/nnnick/Chart.js/v1.0.2/Chart.min.js"></script> 
 
<canvas id="myChart2" height="300" width="500"></canvas>

方法