图表 js 2 如何设置条形宽度

2022-01-22 00:00:00 jquery javascript chart.js

我使用的是 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.

但错误可能来自您编辑值的哪里.

But maybe the error comes from where you edited the value.

您可以在 条形图选项 中看到:

名称: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(Options for 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) 的条形:

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 ...

相关文章