2016-11-18 80 views
1

嘿傢伙感謝您的閱讀,並幫助......圖JS相同的標籤,多數據

使用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..

三江源非常感謝!

回答

0

一個非常快速和骯髒的方法是使用一個配對的陣列上,你想在同一個指數點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>

方法