Highcharts样条和列范围倒置
[英]Highcharts spline and columnrange inverted
问题描述
I have chart that has both splines and a columnrange which ideally would be inverted so the bars run horizontal and the xAxis values will be on the y axis. 
我有既有样条曲线又有columnrange的图表，理想情况下，该图表将被反转，因此条形图水平运行，并且xAxis值位于y轴上。
See current code at jsfiddle . 请参阅jsfiddle中的当前代码 。
Relevant part of code: 相关代码部分：
$(function () {
$('#container').highcharts({
chart: {
//type: 'spline'
//inverted: true,
},
credits: {
enabled: false
},
title: {
text: 'Polygon Graph: 109470 - North Penrith'
},
xAxis: [{
type: 'datetime',
}, {
type: 'category',
categories: ['Planning', 'Bulk Earthworks', 'DA Design', 'CC Design']
}],
yAxis: [{
opposite: true,
labels: {
format: '${value:,.0f}'
},
title: {
text: 'Value ($)'
},
min: 0
}, {
type: 'datetime',
}],
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function () {
var d = new Date(this.y);
return d.getDate();
}
}
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%e %b %y', this.x) + ': ' + ' $' + this.y;
}
},
series: [{
name: 'Expected Costs',
data: [
[Date.UTC(2013, 9, 29), 145000],
[Date.UTC(2013, 10, 6), 140000],
[Date.UTC(2013, 10, 13), 133000],
[Date.UTC(2013, 10, 20), 125000],
[Date.UTC(2013, 10, 27), 116000],
[Date.UTC(2013, 11, 3), 106000],
[Date.UTC(2013, 11, 10), 101000],
[Date.UTC(2013, 11, 17), 96000],
[Date.UTC(2013, 11, 24), 94000],
[Date.UTC(2013, 12, 1), 82000],
[Date.UTC(2013, 12, 8), 70000],
[Date.UTC(2013, 12, 15), 58000],
[Date.UTC(2013, 12, 22), 33000],
[Date.UTC(2013, 12, 29), 8000],
],
color: 'red'
}, {
name: 'Actual Costs',
data: [
[Date.UTC(2013, 9, 29), 135000],
[Date.UTC(2013, 10, 6), 133000],
[Date.UTC(2013, 10, 13), 125000],
[Date.UTC(2013, 10, 20), 116000],
[Date.UTC(2013, 10, 27), 104000],
[Date.UTC(2013, 11, 3), 89000],
[Date.UTC(2013, 11, 10), 84000],
[Date.UTC(2013, 11, 17), 78000],
//[Date.UTC(2013,11,24),75000 ],
// [Date.UTC(2013,12,1),64000 ],
// [Date.UTC(2013,12,8),59000 ],
// [Date.UTC(2013,12,15),50000 ],
// [Date.UTC(2013,12,22),25000 ],
// [Date.UTC(2013,12,29),0 ]
],
color: 'green'
}, {
name: 'Projected Costs',
data: [
//[Date.UTC(2013,9,29),135000 ],
// [Date.UTC(2013,10,6),133000 ],
// [Date.UTC(2013,10,13),125000 ],
// [Date.UTC(2013,10,20),116000 ],
// [Date.UTC(2013,10,27),104000 ],
// [Date.UTC(2013,11,3),89000 ],
// [Date.UTC(2013,11,10),84000 ],
[Date.UTC(2013, 11, 17), 78000],
[Date.UTC(2013, 11, 24), 75000],
[Date.UTC(2013, 12, 1), 64000],
[Date.UTC(2013, 12, 8), 59000],
[Date.UTC(2013, 12, 15), 50000],
[Date.UTC(2013, 12, 22), 25000],
[Date.UTC(2013, 12, 29), 0]
],
dashStyle: 'longdash'
}, {
name: 'Gantt',
type: 'columnrange',
//inverted: true,
xAxis: 1,
yAxis: 1,
data: [
[Date.UTC(2013, 9, 29), Date.UTC(2013, 9, 30)],
[Date.UTC(2013, 9, 30), Date.UTC(2013, 10, 17)],
[Date.UTC(2013, 10, 18), Date.UTC(2013, 10, 30)],
[Date.UTC(2013, 10, 30), Date.UTC(2013, 11, 17)]
],
}]
});
I have tried starting from a columnrange chart and building it from there, however that results in the spline values graphing from smallest to largest (even with a reverse option). 我尝试从列范围图开始并从那里开始构建它，但是这导致样条曲线值从最小到最大（即使使用反向选项）也是如此。 This meant it seemed like a better idea to add the columnrange to the spline base. 这意味着将columnrange添加到样条库似乎是一个更好的主意。
I'm stuck it seems like highcharts should be able to do this. 我被卡住了，看来highcharts应该能够做到这一点。
How do I get the columnrange to be horizontal while still maintaining the rest of the layout of the graph? 在保持其余图表布局的同时，如何使列范围保持水平？
1 个解决方案
解决方案1
0 2014-02-17 10:25:25
Unfortunatley when you use inverted options then axis are flipped and all series are inverted. 不幸的是，当您使用倒置选项时，轴将翻转并且所有系列都将倒置。 It is default behaviour. 这是默认行为。 You cannot combine inverted and not inverted series. 您不能合并倒置和非倒置系列。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.