Chart.js：如何在柱状图中设置自定义比例尺

Question

Chart.js：如何在柱状图中设置自定义比例尺

14

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

    }
}

- badperson

如果zedfoxus的回答解决了你的问题（看起来确实是这样），那么你应该接受他的答案！ - Brendan W

我本来想这么做的，但我需要尝试重新创建这个问题，然后更新HTML代码... 我会尝试在今晚晚些时候完成。 - badperson

@brendan，请查看更新后的HTML/JavaScript代码。谢谢！ - badperson

4个回答

12

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

- Francesco Taioli

4

在 Chart.js v6.4 的新版本中，将 stepValue 改为了 stepSize。 - Faeze

1

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

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

- jnle

0

对于那些在使用 react-chartjs-2 时遇到困难的人：

以下是一个从0开始，每步大小为20的2个steps，并且最大值为max的示例：

let options = {
  scales: {
    y: {
      ticks: {
        beginAtZero: true,
        steps: 2,
        stepSize: 20,
        max: 40
      }
    }
  }
}

使用方法：

// ... your component structure
return <Line options={options} />

- honzanemecek

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- zedfoxus · Accepted Answer

按照文档中的规定，需包含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
});