Highcharts - Stacked bar - 可能有与数据间隔相对应的标签间隔?
Posted
技术标签:
【中文标题】Highcharts - Stacked bar - 可能有与数据间隔相对应的标签间隔?【英文标题】:Highcharts - Stacked bar - Possible to have label interval corresponding to data interval? 【发布时间】:2013-02-19 16:08:28 【问题描述】:我使用 Highcharts 生成了一个堆积条形图,但标签之间的间隔存在问题。
我的数据间隔只有6,highchart生成的标签间隔是100,见demo:http://jsfiddle.net/NjaEw/2/
我想要一个数据对应的标签区间。
这里是代码:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<h1>Testing</h1>
<div id="conformity-by-page" style="width: 100%; height:250px; margin: 0 auto"></div>
$(document).ready(function()
chart = new Highcharts.Chart(
chart:
renderTo: 'conformity-by-page',
type: 'bar',
borderWidth: 1,
borderColor: '#000',
borderRadius: 0,
marginTop: 50
,
exporting:
enabled: false
,
title:
text: ''
,
xAxis:
lineWidth:5,
categories: ['Web site'],
//tickWidth: 0,
title:
text: null
,
labels:
style:
color: '#000000',
fontWeight: 'bold',
fontSize: '14px'
,
yAxis:
lineWidth:0,
title:
text: 'Number of page',
align: 'high',
style:
color: '#000000',
fontSize: '16px'
,
labels:
overflow: 'justify',
style:
color: '#000000',
fontWeight: 'bold',
fontSize: '14px'
,
tooltip:
formatter: function()
return ''+
this.series.name +': '+ this.y +' règles';
,
backgroundColor: '#FFFFFF',
style:
color: '#000',
fontSize: '14px',
padding: '5px'
,
plotOptions:
bar:
borderColor: '#000000',
borderWidth: 1,
/*minPointLength: 10,*/
pointWidth: 25,
stacking: 'percent',
dataLabels:
enabled: true
,
legend:
verticalAlign: 'top',
backgroundColor: '#FFFFFF',
reversed: true,
shadow: true,
symbolWidth: 50,
itemStyle:
color: '#000000',
fontSize: '15px'
,
credits:
enabled: false
, series: [
name: 'Warning',data: [null], color: '#FFFF40',
dataLabels:
style:
fontSize: '15px',
color: '#000000'
,
name: 'Error',data: [3], color: '#FF8080',
dataLabels:
style:
fontSize: '15px',
color: '#000000'
,
name: 'N/A',data: [1], color: '#B5EBFB',
dataLabels:
style:
fontSize: '15px',
color: '#000000'
,
name: 'OK',data: [2], color: '#80FF80',
dataLabels:
style:
fontSize: '15px',
color: '#000000'
]
);
);
【问题讨论】:
【参考方案1】:问题是您使用的是stacking: 'percent'
。
将其更改为'normal'
。
Demo
【讨论】:
哦!非常感谢!以上是关于Highcharts - Stacked bar - 可能有与数据间隔相对应的标签间隔?的主要内容,如果未能解决你的问题,请参考以下文章
R语言ggplot2可视化堆叠条形图(stacked bar plot)并且在每个条形图的顶端使用数值标签表示整个条形的加和值(sum value above the stacked bar)
matplotlib绘制带比例(percentile)的堆叠(stacked)条形图(bar plot)
cufflinks基于dataframe数据绘制柱状图(bar plot)堆叠柱状图(stacked bar plot)
D3.js中Stacked-to-Grouped Bars详解
D3.js中Stacked-to-Grouped Bars详解
r 定制堆叠的#rt http://stackoverflow.com/questions/2578961/how-to-better-create-stacked-bar-graphs-with-m