Javascript chart js 2 如何设置条形宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37856729/
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 2 how to set bar width
提问by kiwi1342
I'm using Chart js version: 2.1.4 and I'm not able to limit the bar width. I found two options on stackoverflow
我使用的是 Chart js 版本：2.1.4，但无法限制条形宽度。我在stackoverflow上找到了两个选项
barPercentage: 0.5
or
或者
categorySpacing: 0
but neither of one works with the mentioned version. Is there a way to solve this issue without manually modifying the chart.js core library?
但没有一个适用于上述版本。有没有办法在不手动修改chart.js核心库的情况下解决这个问题？
thanks
谢谢
回答by tektiv
You were right : The attribute you have to edit is barPercentage.
您是对的：您必须编辑的属性是barPercentage.
But maybe the error comes from whereyou edited the value.
但也许是错误来自哪里，你编辑的值。
As you can see in the bar chart options:
正如您在条形图选项中看到的：
Name: barPercentage
- Type: Number
- Default: 0.9
- Description: Percent (0-1) of the available width each bar should be within the category percentage. 1.0 will take the whole category width and put the bars right next to each other. Read More
名称：barPercentage
-类型：数字
-默认值：0.9
-描述：每个条形可用宽度的百分比 (0-1) 应在类别百分比内。1.0 将采用整个类别宽度并将条形放在彼此相邻的位置。阅读更多
The attribute is actually stored in scales.xAxes("Options for xAxes" table).
该属性实际上存储在scales.xAxes（“ xAxes 选项”表中）。
So you just have to edit your chart this way :
所以你只需要这样编辑你的图表：
var options = {
scales: {
xAxes: [{
barPercentage: 0.4
}]
}
}
这是一个完整的工作示例，带有
0.20.2用于 bar的自定义宽度 ( )：var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
data: [65, 59, 75, 81, 56, 55, 40],
}]
};
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
// Change here
barPercentage: 0.2
}]
}
}
});
console.log(myChart);<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.js"></script>
<canvas id="myChart"></canvas>Update (Chart.js Version 2.2.0+)
更新（Chart.js 版本 2.2.0+）
As stated in the Release Version 2.2.0 - Candidate 2:
正如发布版本 2.2.0 - Candidate 2 中所述：
Enhancements
- Can now manually configure the thickness of a bar in a bar chart. Use a new
barThicknessoption on the correct axis to set the thickness of a bar.- And so on ...
增强功能
- 现在可以手动配置条形图中条形的粗细。
barThickness在正确的轴上使用新选项来设置条的粗细。- 等等 ...
回答by Wei WANG
As of v2.7.2 it can be done by:
从 v2.7.2 开始，它可以通过以下方式完成：
scales: {
xAxes: [{
maxBarThickness: 100,
}],
}
回答by random_user_name
For version 2.8+ (and apparently as far back as 2.2), there are now some excellent controls over the bar thickness, max thickness, etc.
对于 2.8+ 版本（显然早在 2.2 版本），现在有一些对钢筋厚度、最大厚度等的出色控制。
Per the Chart.js documentation, you would set them like so:
根据Chart.js 文档，您可以像这样设置它们：
{
type: 'bar', // or 'horizontalBar'
data: ...,
options: {
scales: {
xAxes: [{
barThickness: 6, // number (pixels) or 'flex'
maxBarThickness: 8 // number (pixels)
}]
}
}
}
回答by rk25
barThicknessand maxBarThickness(previously in ChartOptions[]) are now a part of ChartDataSets[].
barThickness和maxBarThickness（以前在 中ChartOptions[]）现在是 的一部分ChartDataSets[]。
回答by Imrul Islam
In case if you are using ng2-chart in an angular project then the bar chart configuration looks Alike this:
如果您在 angular 项目中使用 ng2-chart，则条形图配置如下所示：
npm install ng2-charts chart.js --save
import 'ng2-charts' in your module.
在您的模块中导入“ng2-charts”。
import { ChartsModule } from 'ng2-charts';
Now the bar chart configurations:
现在条形图配置：
barChartOptions: ChartOptions = {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
},
};
barChartLabels: Label[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
barChartType: ChartType = 'bar';
barChartLegend = true;
barChartPlugins = [];
barChartData: ChartDataSets[] = [
{
barThickness: 16,
barPercentage: 0.5,
data: [65, 59, 80],
label: 'Growth'
},
{
barThickness: 16,
barPercentage: 0.5,
data: [28, 48, 40],
label: 'Net'
}
];
barChartColors: Color[] = [
{ backgroundColor: '#24d2b5' },
{ backgroundColor: '#20aee3' },
];
Now the HTML part:
现在是 HTML 部分：
<div class="bar-chart-wrapper">
<canvas baseChart [datasets]="barChartData" [colors]="barChartColors"
[labels]="barChartLabels"
[options]="barChartOptions" [plugins]="barChartPlugins" [legend]="barChartLegend"
[chartType]="barChartType">
</canvas>
</div>
You can control the height of your chart container
您可以控制图表容器的高度
.bar-chart-wrapper {
height: 310px;
}
