更新

Question

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会实现这一点。

是否可以获得该输出？我通过文档，没有看到任何其他明显的选项设置。

更新

让它发挥作用。我的原帖不包括底部的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,
      });   

    }
}

Answer 1

还包括docs中所述的scaleStartValue和scaleStepWidth。

示例

此示例创建一个条形图，其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 });

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

Answer 3

@ 2.8.0 自定义y轴设置。您只需要最小/最大范围，并使用stepSize即可控制轴。

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

chartjs：如何在条形图中设置自定义比例

更新

3 个答案: