图表js 2如何设置条宽

Question

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

barPercentage: 0.5

要么

categorySpacing: 0

但是没有一个与上述版本一起使用.有没有办法解决这个问题,而无需手动修改chart.js核心库？

谢谢

Answer 1

你是对的:你必须编辑的属性是barPercentage.

但也许是错误来自哪里,你编辑的值.

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

名称:barPercentage
- 类型:数字
- 默认值:0.9
- 说明:可用宽度的百分比(0-1),每个条形应在类别百分比范围内.1.0将采用整个类别宽度并将条形图彼此相邻放置.阅读更多

该属性实际存储在scales.xAxes(" Options for 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+)

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

增强功能

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

Answer 2

从v2.7.2开始,可以通过以下方式完成:

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

Answer 3

根据上面的答案，
这是使用 React ChartJS2 的完整条形图。

import React from 'react';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';
import { Bar } from 'react-chartjs-2';

ChartJS.register(
  CategoryScale,
   LinearScale,
   BarElement,
  Title,
  Tooltip,
  Legend
);

export const options = {
  responsive: true,
    plugins: {
    legend: {
      position: 'top',   // lable position left/right/top/bottom
      labels: {
        boxWidth: 0,     // lable box size
      }
    },
  },
  elements: {
    point: {
      radius: 1
    }
  },
  scales: {
    x: {
      display: false,        // show/ hide x-axis
      grid: {
        display: false      // show/hide grid line in x-axis
      },
    },
    y: {
      display: false,      // same as x-axis
      grid: {
        display: false
      }
    }
  }
};

const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];

export const data = {
  labels,
  datasets: [
    {
      label: 'datasets',            // label text
      data: [100, 300, 500, 700],      
      backgroundColor: '#7b62ff',   // bar / column color
      barThickness: 6,             // <<<<<<<<<<<<   bar / column size  
    },
  ],
};

export default function ResumesGraph() {
  return (
    <div>
      <Bar
        data={data}
        options={options}
        width={'500px'}
        height={'180px'}
      />
    </div>
  );
}

Answer 4

如果您在 angular 项目中使用 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 5

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

Answer 6

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

根据Chart.js文档，您可以这样设置它们：

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