Javascript 如何旋转 HighCharts 条形图使其垂直而不是水平？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11235251/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I rotate my HighCharts bar chart so its vertical, not horizontal?
提问by John Zumbrum
$(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...
回答by Moin Zaman
Vertical bar charts are called column's in Highchart.
垂直条形图column在 Highchart中称为's。
Change this:
改变这个：
type: 'column' //was 'bar' previously`
See example here: http://jsfiddle.net/aznBb/
请参阅此处的示例：http: //jsfiddle.net/aznBb/
回答by StevenClontz
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 horizontaland 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: trueno matter what it's actually set at. It'd be nice if it just toggled the invertedboolean.
很奇怪。我只能猜测type: 'bar'别名type: 'column'和强制，inverted: true无论它实际设置了什么。如果它只是切换inverted布尔值就好了。
回答by Felipe Rodriguez
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]
]
}]
});
});
});
