javascript Chart.js 设置条形图的最大条形尺寸
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29894577/
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
Chart.js setting maximum bar size of bar chart
提问by The6thSense
I want to limit the maximum width of a bar chart
我想限制条形图的最大宽度
My CODE:
我的代码：
<script>
// bar chart data
var a=[];
a.push('kalai 2015-04-11');
var b=[];
b.push('300');
var barData = {
labels : a,
datasets : [
{
fillColor : "#48A497",
strokeColor : "#48A4D1",
data : b
}
]
}
// get bar chart canvas
var income = document.getElementById("income").getContext("2d");
// draw bar chart
new Chart(income).Bar(barData, {scaleGridLineWidth : 1});
<!--new Chart(income).Bar(barData);-->
</script>
What is the way to do so
这样做的方法是什么
It looks like this for single value
对于单个值，它看起来像这样
The size of the bar reduces as the number of bar increases How can i set maximum bar size to make it more viewable
条的大小随着条数的增加而减小 如何设置最大条大小以使其更易于查看
采纳答案by Ashwini Bhat
You can add new options, which are not available by default.But you need to edit chart.js
您可以添加默认不可用的新选项。但您需要编辑chart.js
In Chart.js add these lines of code Step 1:
在 Chart.js 中添加这些代码行步骤 1：
//Boolean - Whether barwidth should be fixed
isFixedWidth:false,
//Number - Pixel width of the bar
barWidth:20,
Add these two line in defaultConfig of Bar Chart
在 Bar Chart 的 defaultConfig 中添加这两行
Step 2:
第2步：
calculateBarWidth : function(datasetCount){
**if(options.isFixedWidth){
return options.barWidth;
}else{**
//The padding between datasets is to the right of each bar, providing that there are more than 1 dataset
var baseWidth = this.calculateBaseWidth() - ((datasetCount - 1) * options.barDatasetSpacing);
return (baseWidth / datasetCount);
}
Add this condition in calculateBarWidth function of barchart
在条形图的calculateBarWidth函数中加入这个条件
Now you can set barWidth in custom js file as option by setting
现在您可以通过设置将自定义 js 文件中的 barWidth 设置为选项
isFixedWidth:true,
barWidth:xx
If you don't want to specify fixed barwidth, just change isFixedWidth:false
如果您不想指定固定条宽，只需更改 isFixedWidth:false
回答by Anthony Mutisya
Its kinda late to answer this but hope this helps someone out there... play around with barDatasetSpacing [ adds spacing after each bar ] and barValueSpacing [ adds spacing before each bar ] to be able to achieve your desired bar width.. example below when initiating your bar chart
回答这个问题有点晚了，但希望这能帮助那里的人......玩弄 barDatasetSpacing [在每个条之后添加间距] 和 barValueSpacing [在每个条之前添加间距] 能够达到您想要的条宽度.. 示例如下启动条形图
... barDatasetSpacing:10, barValueSpacing:30, ...
Hope it helps..
希望能帮助到你..
回答by Chandru
I did it by extending Bar chart, and calculating barValueSpacing dynamically. I use angular chartjs
我通过扩展条形图并动态计算 barValueSpacing 来做到这一点。我使用角度chartjs
var MAX_BAR_WIDTH = 50;
Chart.types.Bar.extend({
name: "BarAlt",
draw: function(){
var datasetSize = n // calculate ur dataset size here
var barW = this.chart.width / datasetSize;
if(barW > MAX_BAR_WIDTH){
this.options.barValueSpacing = Math.floor((this.chart.width - (MAX_BAR_WIDTH * datasetSize)) / datasetSize);
}
Chart.types.Bar.prototype.draw.apply(this, arguments);
}
});
回答by Nilesh Mahajan
Did you tried following options?
您是否尝试过以下选项？
{
//Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
scaleBeginAtZero : true,
//Boolean - Whether grid lines are shown across the chart
scaleShowGridLines : true,
//String - Colour of the grid lines
scaleGridLineColor : "rgba(0,0,0,.05)",
//Number - Width of the grid lines
scaleGridLineWidth : 1,
//Boolean - Whether to show horizontal lines (except X axis)
scaleShowHorizontalLines: true,
//Boolean - Whether to show vertical lines (except Y axis)
scaleShowVerticalLines: true,
//Boolean - If there is a stroke on each bar
barShowStroke : true,
//Number - Pixel width of the bar stroke
barStrokeWidth : 2,
//Number - Spacing between each of the X value sets
barValueSpacing : 5,
//Number - Spacing between data sets within X values
barDatasetSpacing : 1,
//String - A legend template
legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
}
