Question

highcharts做柱状图，怎样设置柱子宽度

Answer 1

可以通过设置plotOptions内对应series的pointWidth也就是数据点的宽度值加以控制，完整代码如下所示：

view sourceprint?
01.$(function () {
02.$('#container').highcharts({
03.chart: {
04.type: 'bar'
05.},
06.xAxis: {
07.categories: ['Jan', 'Feb', 'Mar']
08.},
09.
10.plotOptions: {
11.series: {
12.pointWidth: 3 //柱子的宽度值 单位为px
13.}
14.},
15.credits: {
16.text: 'highcharts的博客',
17.href: 'http://www.stepday.com/myblog/?highcharts',
18.position: {
19.align: 'right', //水平居右
20.verticalAlign: 'bottom' //垂直底部
21.},
22.style: {
23.cursor: 'pointer', //鼠标样式为手型
24.color: '#FF0000', //字体颜色
25.fontSize: '10px' //字体大小
26.}
27.},
28.series: [{
29.data: [29.9, 71.5, 106.4]
30.}]
31.});
32.});

Answer 2

设置 plotOptions.column.pointWidth  即可，

$("#container").highcharts({
    // ...
    plotOptions: {
        column: {
            pointWidth:20 
            // 见 API 文档  http://www.hcharts.cn/api/index.php#plotOptions.column.pointWidth
        }
    }
    // ...
});