好吧,我在网络应用程序中使用 highcharts。 这是在柱形图中显示人口统计数据的任务,如图像所示:
我现在只有下一个例子:http://jsfiddle.net/futw5e8k/1/
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
offset: -150
},
yAxis: {
allowDecimals: false,
title: {
text: 'Number of fruits'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
}, {
name: 'Joe',
data: [-3, -4, -4, -2, -5],
}]
});
目前在图表中间显示 categories
时存在一些空间问题。在我的示例中,offset
不是根据数据生成的,因此并非适用于所有情况
最佳答案
您可以使用两个 y 轴,它们将使用 top
和 height
定义位置。
演示:http://jsfiddle.net/futw5e8k/2/
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
offset: -150,
lineWidth: 0,
tickWidth: 0
},
yAxis: [{
allowDecimals: false,
title: {
text: 'Number of fruits',
y: 100,
x: -10
},
top: 50,
height: 124
},{
title: {
text: null
},
top: 200,
height: 150,
offset: 0
}],
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
}, {
name: 'Joe',
yAxis: 1,
data: [-3, -4, -4, -2, -5],
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
关于javascript - HighCharts 中 xAxis 上具有负值和类别的柱形图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42552499/