Highcharts - 多个Y轴堆叠图 [英] Highcharts - Multiple Y Axis Stacked Charts
问题描述
我正在创建一个有两个Y轴的图表 - 距离和持续时间。每个Y轴将具有彼此堆叠的多个系列（跑步，自行车，游泳等）。持续时间是一个堆积区域或区域线，距离是一个堆积的柱形图。
I am creating a chart with two Y axes - distance and duration. Each Y axis will have multiple series ( run, bike, swim, etc.) stacked on top of one another. Duration is a stacked area or areaspline and distance is a stacked column chart.
这里是图表的jsfiddle。 http://jsfiddle.net/baberuth22/u5QCB/3/
Here is the jsfiddle for the chart. http://jsfiddle.net/baberuth22/u5QCB/3/
$(function() {
var run_data = [[1324771200000,2928000],[1325376000000,2148000],[1327190400000,1001000],[1327795200000,2336000],[1329609600000,2403000],[1330214400000,2456000],[1330819200000,3615000],[1334448000000,1753000],[1338681600000,1998000],[1348358400000,1897000],[1350777600000,8130000],[1353801600000,9402000],[1354406400000,9612000],[1355011200000,4500000]];
var swim_data = [[1324771200000,1726000],[1348963200000,14520000],[1350777600000,15540000],[1352592000000,7380000],[1353801600000,4571000],[1354406400000,4500000]];
var bike_data = [[1327190400000,4289000],[1330214400000,4650000],[1330819200000,3655000],[1331424000000,2217000],[1334448000000,4349000],[1348963200000,4241000],[1350777600000,15014000],[1351382400000,4118000],[1353196800000,3362000],[1353801600000,11944000],[1354406400000,5997000]];
var strength_data = [[1324771200000,3275000],[1334448000000,600000],[1350777600000,4403000],[1351382400000,3339000],[1351987200000,4175000],[1353196800000,3754000],[1354406400000,3890000]];
var yoga_data = [[1351382400000,2656000],[1352592000000,609000]];
var other_data = [[1352592000000,309000],[1353196800000,186000]];
var run_distance_data = [[1324771200000,4],[1325376000000,3.1],[1327190400000,1.5],[1327795200000,3],[1329609600000,3.4],[1330214400000,3.5],[1330819200000,4.9],[1334448000000,2.5],[1338681600000,2.7],[1348358400000,2.6],[1350777600000,10.2],[1353801600000,7.6],[1354406400000,17.2],[1355011200000,10],[1331424000000,0],[1348963200000,0],[1351382400000,0],[1351987200000,0],[1352592000000,0],[1353196800000,0]];
var swim_distance_data = [[1324771200000,0.5],[1348963200000,1.5],[1350777600000,3.1],[1352592000000,0.2],[1353801600000,6.2],[1354406400000,3.1],[1325376000000,0],[1327190400000,0],[1327795200000,0],[1329609600000,0],[1330214400000,0],[1330819200000,0],[1331424000000,0],[1334448000000,0],[1338681600000,0],[1348358400000,0],[1351382400000,0],[1351987200000,0],[1353196800000,0],[1355011200000,0]];
var bike_distance_data = [[1327190400000,19.4],[1330214400000,20.2],[1330819200000,16.1],[1331424000000,9.9],[1334448000000,16.3],[1348963200000,16.1],[1350777600000,168],[1351382400000,15.5],[1353196800000,10.7],[1353801600000,47.2],[1354406400000,24],[1324771200000,0],[1325376000000,0],[1327795200000,0],[1329609600000,0],[1338681600000,0],[1348358400000,0],[1351987200000,0],[1352592000000,0],[1355011200000,0]];
var other_distance_data = [[1352592000000,3.1],[1353196800000,3],[1324771200000,0],[1325376000000,0],[1327190400000,0],[1327795200000,0],[1329609600000,0],[1330214400000,0],[1330819200000,0],[1331424000000,0],[1334448000000,0],[1338681600000,0],[1348358400000,0],[1348963200000,0],[1350777600000,0],[1351382400000,0],[1351987200000,0],[1353801600000,0],[1354406400000,0],[1355011200000,0]];
// one week - 604800000
var chart = new Highcharts.Chart({
chart: {
renderTo: 'graph1',
zoomType: 'x'
},
title: {
text: 'Workout Duration By Week'
},
subtitle: {
text: document.ontouchstart === undefined ? 'Click and drag in the plot area to zoom in' : 'Drag your finger over the plot to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: [{
type: 'datetime',
//y-axis will be in milliseconds
dateTimeLabelFormats: { //force all formats to be hour:minute:second
second: '%H:%M:%S',
minute: '%H:%M:%S',
hour: '%H:%M',
day: '%H'
},
title: {
text: 'Duration (hours)'
},
min: 0
}
,
{
min: 0,
title: {
text: 'Distance ' + '(miles)'
},
opposite: true}
],
tooltip: {
formatter: function() {
var range_start_date = new Date(this.x);
//var range_start_date = new Date(this.x * 1000);
var range_end_date = new Date(range_start_date);
range_end_date.setDate(range_end_date.getDate() + 6);
var unix_end_datetime = range_end_date.getTime();
var return_string = '<b>' + this.series.name + '</b> ' + Highcharts.dateFormat('%b %e', this.x) + ' - ' + Highcharts.dateFormat('%b %e', unix_end_datetime) + '<br/>';
if (this.series.index <= 5){
return_string += Highcharts.dateFormat('%H hours %M minutes', this.y) + ' ';
}else{
return_string += this.y + ' (miles) ';
}
return return_string;
}
},
plotOptions: {
column: {
pointRange: 604800000,
stacking: 'normal'
},
area: {
stacking: 'normal'
}
},
series: [
{
name: 'Run',
data: run_data,
type: 'column'},
{
name: 'Swim',
data: swim_data,
type: 'column'},
{
name: 'Bike',
data: bike_data,
type: 'column'},
{
name: 'Strength',
data: strength_data,
type: 'column'},
{
name: 'Yoga',
data: yoga_data,
type: 'column'},
{
name: 'Other',
data: other_data,
type: 'column'}
,
{
name: 'Run',
data: run_distance_data,
yAxis: 1,
type: 'area'},
{
name: 'Swim',
data: swim_distance_data,
yAxis: 1,
type: 'area'},
{
name: 'Bike',
data: bike_distance_data,
yAxis: 1,
type: 'area'},
{
name: 'Other',
data: other_distance_data,
yAxis: 1,
type: 'area'
}
]
});
var d = new Date();
chart.xAxis[0].setExtremes(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate() - 7), Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
chart.showResetZoom();
}）;
堆叠似乎不能正常工作，我没有看到在highcharts演示页面上堆叠多个轴的示例。 http://www.highcharts.com/demo/combo-multi-axes 或 http://www.highcharts.com/demo/column-stacked ，但不能都。
The stacking doesn't seem to work properly and I do not see any examples of multiple axes stacked on the highcharts demo page. http://www.highcharts.com/demo/combo-multi-axes or http://www.highcharts.com/demo/column-stacked , but not both.
如果我将两个轴都设置为'column'类型，堆叠将工作，但是条柱是在彼此的顶部。理想情况下，我想要一个半透明的区域图表在背景与前面的列。
If I set both axes to 'column' type, the stacking works, but the bars are on top of each other. Ideally I'd like a semi-transparent area chart in the background with column in front.
推荐答案
我认为它实际上与两个堆栈的工作方式，你做的，但是区域系列的堆叠打破，因为数据点不存在每个日期。所以如果你确保每个数据在区域系列中的数据点的预处理，我认为它应该工作。
I think it actually works with two stacks the way you are doing it, but the stacking of the area series breaks because data points are not present for every date. So if you make sure when preprocessing that every data has a data point in the area series, I think it should work.
这篇关于Highcharts - 多个Y轴堆叠图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
