Chartjs is a pretty excellent open source tool, but had a quick question about a bar chart I'm trying to create. Given this chart data:

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
            }
        ]   
    }

I had hoped that the chart would draw with top value of 10, whether or not there were any values of 10. I thought the scaleOverride and scaleSteps would accomplish that.

我曾希望这个图表的最大值是10，不管有没有10的值。我认为scaleOverride和scaleSteps可以实现这一点。

Is it possible to get that output? I went thru the docs and did not see any other obvious options to set.

有可能得到那个输出吗?我浏览了文档，没有看到其他明显的选项。

Update

got it to work. My orig post did not include the javascript function at the bottom.

找到了工作。我的orig post没有在底部包含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>

and here is my javascript:

这是我的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;

}

here was where I added those options and got the output I wanted:

我在这里添加了这些选项，得到了我想要的输出:

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,
      });   

    }
}

2 个解决方案

#1

Also include scaleStartValue and scaleStepWidth as stated in docs.

也包括scaleStartValue和scaleStepWidth，如文档中所述。

Example

例子

This example creates a bar chart with Y-axis starting at 0 and ending at 900. To do that, step width is set to 100 and number of steps are set to 9.

这个例子创建了一个条形图，y轴从0开始，到900结束。为此，将步骤宽度设置为100，将步骤数量设置为9。

HTML

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>

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
                                }
                            }
                        }]
                    }
                }
            });

#1