prss.net
当前位置:首页 >> highChArts横向柱状图 >>

highChArts横向柱状图

下载官方的例子以后,里面 Basic bar Stacked bar 都是你所想要的样式。

xAxis: { gridLineColor: '#197F07', gridLineWidth: 1},yAxis: { gridLineColor: '#197F07', gridLineWidth: 2},

你是只要横着就行呢?还是横着以后还要显示分段呢?

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

示例:column Chart plotOptions: { column : { borderWidth: 0, pointWidth:25, //柱子宽度 dataLabels: { style:{ fontSize:11 }, enabled: false } } },

可以通过设置plotOptions内对应series的pointWidth也就是数据点的宽度值加以控制,完整代码如下所示: view sourceprint? 01.$(function () { 02.$('#container').highcharts({ 03.chart: { 04.type: 'bar' 05.}, 06.xAxis: { 07.categories: ['...

示例:column Chart plotOptions: { column : { borderWidth: 0, pointWidth:25, //柱子宽度 dataLabels: { style:{ fontSize:11 }, enabled: false } } },

很简单,设置 xAxis.labels.enabled 为false即可,代码如下: xAxis: { labels: { enabled: false// Highcharts学习交流群294191384 }},效果如图:

plotOptions: { series: { pointPadding: 0, //数据点之间的距离值 groupPadding: 0, //分组之间的距离值 borderWidth: 0, shadow: false, pointWidth:5 //柱子之间的距离值 } }

series: [{ data: [{'color':'#F6BD0F','y':11}, {'color':'#AFD8F8','y':12}, {'color':'#8BBA00','y':13}, {'color':'#FF8E46','y':14}, {'color':'#008E8E','y':15}, {'color':'#D64646','y':16}, {'color':'#8E468E','y':17}], }]

网站首页 | 网站地图
All rights reserved Powered by www.prss.net
copyright ©right 2010-2021。
内容来自网络,如有侵犯请联系客服。zhit325@qq.com