2013-04-01 91 views
40

我有一個圖表,我想包括在我的網站使用Chart.js。在Y軸它給我的實數不是整數,這就是我想要的,這裏是什麼,我現在有一個畫面:如何將實數的Y軸值更改爲chartjs中的整數?

enter image description here

這就是代碼:

var lineChartData = { 

     labels : ["2013/04/01","2013/03/31", "2013/03/30", "2013/03/29", "2013/03/28","2013/03/27", "2013/03/26"], 

     datasets : [ 
      { 
       fillColor : "rgba(151,187,205,0.5)", 
       strokeColor : "rgba(151,187,205,1)", 
       pointColor : "rgba(151,187,205,1)", 
       pointStrokeColor : "#fff", 
       data : ["0", "2","1", "0", "1","0","1"] 
      } 
     ] 

    } 

var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(lineChartData); 
+0

需要這個,你解決了嗎? – Mewel

回答

51

試試這個,其中max是數據的最高值。

var steps = 3; 
new Chart(ctx).Bar(plotData, { 
    scaleOverride: true, 
    scaleSteps: steps, 
    scaleStepWidth: Math.ceil(max/steps), 
    scaleStartValue: 0 
}); 
+2

非常感謝,它的工作! –

+0

是的,它的工作原理! – RolandoCC

+0

@Mewel我不希望Y軸標籤完全顯示。我怎麼能這樣做?必須有一個選項權利。 –

5

如果您喜歡在不同的數量大於零開始,你必須考慮到這一點:

var step = 5; 
var max = 90 
var start = 40; 
new Chart(income).Bar(barData, { 
scaleOverride: true, 
scaleSteps: Math.ceil((max-start)/step), 
scaleStepWidth: step, 
scaleStartValue: start 
}); 
5

檢查Chart.js文件,在全局配置部分:

//布爾值 - 量表是否應該保持整數,即使有繪圖空間也不會浮動 scaleIntegersOnly:true,

希望它有幫助。

+0

這似乎不適用於我 – jcuenod

+0

如果它不起作用,您可能沒有'scaleOverride:true'。 – Gavin

+0

大概圖表版本1,這是過時 – John

29

我是不是能夠得到現有的答案使用chart.js之的新版本2時爲我工作,所以這裏是我的發現,解決在V2這個問題:

new Chart(ctx, {type: 'bar', data: barChartData, 
    options:{ 
    scales: { 
     yAxes: [{ 
     ticks: { 
      stepSize: 1 
     } 
     }] 
    } 
    } 
}); 
+5

請注意,這將顯示您的y軸的所有整數。如果您的圖表從0到300運行,則會顯示所有301個整數和網格線。 – apfz

+0

@apfz非常真實的,只有當你對數據的規模有一個好的概念,並且可以事先計算出一個合理的步長時,這纔會起作用。 – DBS

59

我以新版本的方式處理它:

new Chart(ctx, { 
    type: 'bar', 
    data: chartData, 
    options: { 
    scales: { 
     yAxes: [{ 
     ticks: { 
      beginAtZero: true, 
      callback: function(value) {if (value % 1 === 0) {return value;}} 
     } 
     }] 
    } 
    } 
}); 
+1

非常感謝!像魅力一樣工作。我想知道爲什麼這不是最好的答案。 –

+2

這應該是被接受的答案 – John

相關問題