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

Question

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

Run Code Online (Sandbox Code Playgroud)

我曾希望图表的最高值为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>

Run Code Online (Sandbox Code Playgroud)

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

}

Run Code Online (Sandbox Code Playgroud)

这是我添加这些选项并得到我想要的输出的地方:

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

    }
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

zed*_*xus 15

还包括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>

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

文档根本不能很好地解释这一点.谢谢你的回答,为我解决了一个问题! (2认同)

Answer 2

Tai*_*sco 10

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

Run Code Online (Sandbox Code Playgroud)

在新版本的chartjs v6.4中。它是“ stepSize”而不是“ stepValue”。 (2认同)

归档时间：	10 年，5 月前
查看次数：	50887 次
最近记录：	6 年，5 月前