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

highChArts横向柱状图

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

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

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

设置 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: { pointPadding: 0, //数据点之间的距离值 groupPadding: 0, //分组之间的距离值 borderWidth: 0, shadow: false, pointWidth:5 //柱子之间的距离值 } }

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

在column的point中添加click事件 plotOptions: { column: { cursor: 'pointer', point: { events: { click: function() { //★添加跳转代码★ } } }, ……………… } } }

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

柱形图和面积图可以设置成堆叠的形式,堆叠后同一个分类下的数据不再是水平依次排列而是依次从上到下堆叠在一起。 堆叠有两种形式,普通的堆叠和按百分比堆叠;普通堆叠是按照数值大小依次堆叠,百分比堆叠是按照数值所占百分比进行堆叠。 下面...

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