2013-04-01 5 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 документации, в Глобальном разделе конфигурации:

// Boolean - должен ли масштаб придерживаться целых чисел, а не плавать, даже если имеется пространство для рисования scaleIntegersOnly: true,

Надеюсь, что это поможет.

+0

Это не работает для меня – jcuenod

+0

Если это не работает, у вас, вероятно, не было 'scaleOverride: true'. – Gavin

+0

Наверное, диаграмма 1, устаревшая – John

29

Я не был в состоянии получить существующие ответы на меня работать при использовании новой версии 2 Chart.js, так вот что я нашел, чтобы решить эту проблему в 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