更新（Chart.js版本2.2.0 +）

Question

我正在使用Chart js版本：2.1.4而且我无法限制条形宽度。我在stackoverflow上找到了两个选项

barPercentage: 0.5

或

categorySpacing: 0

但两者都不适用于上述版本。有没有办法解决这个问题而无需手动修改chart.js核心库？

感谢

Answer 1

你是对的：你必须编辑的属性是barPercentage。

但也许错误来自你编辑了这个值。

正如您在bar chart options中所看到的那样：

姓名： barPercentage
   - 输入：数字
   - 默认：0.9
   - 描述：每个条的可用宽度的百分比（0-1）应该在类别百分比内。 1.0将采用整个类别宽度并将条形图彼此相邻放置。 Read More

该属性实际存储在scales.xAxes（“ xAxes 选项”表）中。

所以你只需要这样编辑你的图表：

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>

<小时/>

更新（Chart.js版本2.2.0 +）

如Release Version 2.2.0 - Candidate 2中所述：

增强


现在可以手动配置条形图中条形的粗细。在正确的轴上使用新的barThickness选项来设置条的粗细。

依旧......

Answer 2

从v2.7.2开始，可以通过以下方式完成：

scales: {
  xAxes: [{
    maxBarThickness: 100,
  }],
}

Answer 3

如果在有角项目中使用ng2-chart，则条形图的配置看起来像这样：

npm install ng2-charts chart.js --save

在模块中导入“ ng2-charts”。

import { ChartsModule } from 'ng2-charts';

现在条形图配置：

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' },
 ];

现在是HTML部分：

<div class="bar-chart-wrapper">
   <canvas baseChart [datasets]="barChartData" [colors]="barChartColors" 
     [labels]="barChartLabels"
     [options]="barChartOptions" [plugins]="barChartPlugins" [legend]="barChartLegend"
     [chartType]="barChartType">
   </canvas>
 </div>

您可以控制图表容器的高度

  .bar-chart-wrapper {
     height: 310px;
   }

Answer 4

对于2.8+版（显然可以追溯到2.2版），现在可以对钢筋的厚度，最大厚度等进行一些出色的控制。

对于Chart.js documentation，您可以这样设置它们：

{
    type: 'bar', // or 'horizontalBar'
    data: ...,
    options: {
        scales: {
            xAxes: [{
                barThickness: 6,  // number (pixels) or 'flex'
                maxBarThickness: 8 // number (pixels)
            }]
        }
    }
}

Answer 5

barThickness和maxBarThickness（以前在ChartOptions[]中）现在是ChartDataSets[]的一部分。

图表js 2如何设置条宽

5 个答案:

更新（Chart.js版本2.2.0 +）

增强