图表js 2如何设置条形宽度 [英] chart js 2 how to set bar width

问题描述

我正在使用Chart js版本:2.1.4，但无法限制条形宽度.我在stackoverflow上找到了两个选项

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

barPercentage: 0.5

或

categorySpacing: 0

，但没有一个适用于所提到的版本.有没有解决方法，而无需手动修改chart.js核心库?

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?

谢谢

推荐答案

您是正确的:您必须编辑的属性是barPercentage.

You were right : The attribute you have to edit is barPercentage.

但是错误可能出在您编辑了值的地方.

如您在条形图选项中所看到的:

名称: barPercentage
-类型:数字
-默认:0.9
-说明:每个条形的可用宽度的百分比(0-1)应该在类别百分比之内. 1.0将占据整个类别的宽度，并将条形图彼此紧挨着放置. 了解详情

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

该属性实际上存储在scales.xAxes中(" xAxes的选项"表).

The attribute is actually stored in scales.xAxes ("Options for xAxes" table).

因此，您只需要以这种方式编辑图表:

So you just have to edit your chart this way :

var options = {
    scales: {
        xAxes: [{
            barPercentage: 0.4
        }]
    }
}

---

这是一个完全有效的示例，其条形具有自定义宽度(0.2):

---

Here is a fully working example with a custom width (0.2) for the 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>

---

如版本2.2.0中所述-候选人2 :

增强

• 现在可以在条形图中手动配置条形的粗细.在正确的轴上使用新的barThickness选项来设置钢筋的厚度.
• 以此类推...

Enhancements

• Can now manually configure the thickness of a bar in a bar chart. Use a new barThickness option on the correct axis to set the thickness of a bar.
• And so on ...

这篇关于图表js 2如何设置条形宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！