Javascript chartjs：如何在条形图中设置自定义比例
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31632967/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
chartjs : how to set custom scale in bar chart
提问by badperson
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.
让它工作。我的原始帖子底部没有包含 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,
});
}
}
回答by zedfoxus
Also include scaleStartValueand scaleStepWidthas 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>
JS
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
});
回答by Taioli Francesco
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
}
}
}]
}
}
});
回答by jnle
@2.8.0 custom y-axis setup. You only need range min/max and with stepSize you control the axis.
@2.8.0 自定义 y 轴设置。您只需要最小/最大范围，并使用 stepSize 控制轴。
...
yAxes: [{
ticks: {
stepSize: 0.1,
min: 2,
max: 2.5
},
gridLines: {
display: false
},
stacked: false
}]
...
