Chartjs: как настроить пользовательский масштаб на гистограмме

Chartjs - довольно отличный инструмент с открытым исходным кодом, но у вас был быстрый вопрос о диаграмме, которую я пытаюсь создать. Учитывая эти данные диаграммы:

    var chartData = {
        labels : labels,
        datasets :[
            {
                fillColor : "rgba(220,220,220,0.5)",
                strokeColor : "rgba(220,220,220,0.8)",
                highlightFill: "rgba(220,220,220,0.75)",
                highlightStroke: "rgba(220,220,220,1)",
                scaleOverride: true,
                scaleSteps: 9,
                data : values
            }
        ]   
    }

Я надеялся, что график будет рисовать с максимальным значением 10, независимо от того, были ли какие-либо значения 10. Я думал, что scaleOverride и scaleSteps достигнут этого.

Можно ли получить этот вывод? Я пошел через документы и не видел никаких других очевидных вариантов.

Update

заставил его работать. Мой исходный пост не включал функцию javascript внизу.

<div class="barChartTest" id="rating_12229" onload="drawChart();">
<input type="hidden" class="rating-component" comp-name="test1" comp-value="6"/>
<input type="hidden" class="rating-component" comp-name="test2" comp-value="7"/>
<input type="hidden" class="rating-component" comp-name="test3" comp-value="6"/>
<input type="hidden" class="rating-component" comp-name="test4" comp-value="5"/>
<input type="hidden" class="rating-component" comp-name="test5" comp-value="1"/>
</div> 
<canvas id="rating_12229" width="50" height="20"></canvas>

и вот мой javascript:

function buildRatingChartData(ratingId){
    var comps = document.getElementById(ratingId).getElementsByClassName("rating-component");   
    var labels = [];
    var values = [];

    for(var i=0; i<comps.length; i++){

            labels.push(comps[i].getAttribute("comp-name"));
            values.push(comps[i].getAttribute("comp-value"));
    }

    var chartData = {
        labels : labels,
        datasets :[
            {
                scale: 10,
                fillColor : "rgba(220,220,220,0.5)",
                strokeColor : "rgba(220,220,220,0.8)",
                highlightFill: "rgba(220,220,220,0.75)",
                highlightStroke: "rgba(220,220,220,1)",
                scaleOverride:true,
                scaleSteps:9,
                scaleStartValue:0,
                scaleStepWidth:1,
                data : values
            }
        ]   
    }

    return chartData;

}

здесь я добавил эти параметры и получил желаемый результат:

function drawCharts(){
    var ratings = document.getElementsByClassName("brewRatingData");
    for(var i=0; i<ratings.length; i++){

        var ratingId = ratings[i].getAttribute("id");   
        var canvasId = ratingId.replace("brewRating", "coffeeBarChart");

      var brewChartData = buildRatingChartData(ratingId);
      var ctx = document.getElementById(canvasId).getContext("2d");
      window.myBar = new Chart(ctx).Bar(brewChartData, {
        responsive : true,
            scaleOverride:true,
            scaleSteps:10,
            scaleStartValue:0,
            scaleStepWidth:1,
      });   

    }
}

Ответы

Ответ 1

Также включите scaleStartValue и scaleStepWidth, как указано в docs.

Пример

В этом примере создается гистограмма с осью Y, начинающейся с 0 и заканчивающейся на 900. Для этого ширина шага установлена ​​равной 100, а число шагов - 9.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
    <body>
      <canvas id="income" width="600" height="400"></canvas>
    </body>
</html>

JS

var barData = {
    labels : ["January","February","March","April","May","June"],
    datasets : [
        {
            fillColor : "#48A497",
            strokeColor : "#48A4D1",
            data : [456,479,324,569,702,600]
        },
        {
            fillColor : "rgba(73,188,170,0.4)",
            strokeColor : "rgba(72,174,209,0.4)",
            data : [364,504,605,400,345,320]
        }

    ]
};

var income = document.getElementById("income").getContext("2d");

new Chart(income).Bar(barData, {
  animation:false,
  scaleOverride:true,
  scaleSteps:9,
  scaleStartValue:0,
  scaleStepWidth:100
});

Ответ 2

var myChart = new Chart(ctx, {
                type: 'bar',
                data:data,
                options: {
                    responsive: true,
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true,
                                steps: 10,
                                stepValue: 6,
                                max: 60 //max value for the chart is 60
                                }
                            }
                        }]
                    }
                }
            });

Ответ 3

@2.8.0 Пользовательская настройка оси Y. Вам нужен только диапазон min/max, а с помощью stepSize вы управляете осью.

...
yAxes: [{
        ticks: {
            stepSize: 0.1,
            min: 2,
            max: 2.5
            },
        gridLines: {
            display: false 
            },
        stacked: false
                    }]
 ...