Highcharts - 多個Y軸堆積圖

Question

我正在用兩個Y軸 - 距離和持續時間創建圖表。每個Y軸將有多個系列（跑步，自行車，游泳等）堆疊在一起。持續時間是一個堆積區域或區域線，距離是堆積柱形圖。

這是圖表的jsfiddle。 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，但不是兩者。

如果我將兩個座標軸都設置爲「列」類型，則堆疊可以工作，但是這些豎條相互重疊。理想情況下，我想在背景中使用前半列的半透明區域圖表。

Answer 1

我認爲它實際上與兩個堆棧一起工作，但是堆疊的區域系列會中斷，因爲數據點在每個日期都不存在。所以如果你確定預處理每個數據在區域系列中有一個數據點時，我認爲它應該起作用。