HighCharts 柱状图怎样设置为横向排列？

Posted 2023-03-21

如图 。
竖向的已写出，怎么设置可以变成横向的？

参考技术A 下载官方的例子以后，里面
Basic bar
Stacked bar
都是你所想要的样式。本回答被提问者和网友采纳 参考技术B chart:
inverted: true,
, 参考技术C var chart =
type: 'column',
inverted: true
;
inverted: true这个就是说XY轴互换

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

可以通过设置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.); 参考技术A

设置 plotOptions.column.pointWidth  即可，

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