[英]How do I rotate my HighCharts bar chart so its vertical, not horizontal?
$(document).ready(function() {
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'QueryResultsChart',
type: 'bar'
},
title: {
text: 'Production History'
},
xAxis: {
title: {
text: 'Production Day'
},
type: 'datetime'
},
yAxis: {
title: {
text: 'Gross Production'
}
},
series: [{
name: 'Data',
data: []
}]
});
chart1.series[0].setData(". json_encode($aChartData) .");
});
The data is there an correct, it's just showing my xAxis on the yAxis for some reason... 数据是正确的,它只是出于某种原因在yAxis上显示我的xAxis ...
Vertical bar charts are called column
's in Highchart. 垂直条形图在Highchart中称为
column
。
Change this: 改变这个:
type: 'column' //was 'bar' previously`
See example here: http://jsfiddle.net/aznBb/ 请参见此处的示例: http : //jsfiddle.net/aznBb/
To expand on Moin Zaman's answer, I played with his jsfiddle http://jsfiddle.net/aznBb/ and found this. 为了扩展Moin Zaman的答案,我和他的jsfiddle http://jsfiddle.net/aznBb/一起玩,发现了这一点。
This is horizontal . 这是横向的 。
chart: {
type: 'bar',
inverted: false // default
}
This is also horizontal . 这也是横向的 。
chart: {
type: 'bar',
inverted: true
}
This is vertical . 这是垂直的 。
chart: {
type: 'column',
inverted: false // default
}
This is horizontal and apparently identical to the bar charts . 这是水平的 ,显然与条形图相同 。
chart: {
type: 'column',
inverted: true
}
Very odd. 很奇怪。 I can only guess that
type: 'bar'
aliases type: 'column'
and forces inverted: true
no matter what it's actually set at. 我只能猜测那种
type: 'bar'
别名type: 'column'
和强制inverted: true
无论实际设置的是什么,都是真的。 It'd be nice if it just toggled the inverted
boolean. 如果它只是切换
inverted
布尔值,那就太好了。
You should try something like this: 你应该尝试这样的事情:
$(function () {
Highcharts.chart('container', {
chart: {
type: 'columnrange',
inverted: false
},
title: {
text: 'Temperature variation by month'
},
subtitle: {
text: 'Observed in Vik i Sogn, Norway'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature ( °C )'
}
},
tooltip: {
valueSuffix: '°C'
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function () {
return this.y + '°C';
}
}
}
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
data: [
[-9.7, 9.4],
[-8.7, 6.5],
[-3.5, 9.4],
[-1.4, 19.9],
[0.0, 22.6],
[2.9, 29.5],
[9.2, 30.7],
[7.3, 26.5],
[4.4, 18.0],
[-3.1, 11.4],
[-5.2, 10.4],
[-13.5, 9.8]
]
}]
});
}); });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.