chartjs：如何在条形图中设置自定义比例 [英] chartjs : how to set custom scale in bar chart
问题描述
Chartjs是一款非常优秀的开源工具，但对我正在尝试创建的条形图有一个快速的问题。鉴于此图表数据：
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:
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，无论是否有我认为scaleOverride和scaleSteps会实现这一点。
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.
是否可以获得该输出？我通过文档，没有看到任何其他明显的选项设置。
Is it possible to get that output? I went thru the docs and did not see any other obvious options to set.
让它发挥作用。我的原帖不包括底部的javascript函数。
got it to work. My orig post did not include the javascript function at the bottom.
<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：
and here is my 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,
});
}
}
推荐答案
还包括<$ h $ => http：//www.chartjs中所述的 scaleStartValue 和 scaleStepWidth 。 org / docs /＃getting-started-global-chart-configurationrel =noreferrer> docs 。
Also include scaleStartValue and scaleStepWidth as stated in docs.
示例
此示例创建一个条形图，其Y轴从0开始，结束于900.为此，步长设置为100，步数设置为9。
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.
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
});
这篇关于chartjs：如何在条形图中设置自定义比例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
