显示两个不同的系列，具有不同的开始间隔，具有相同的xAxis高位图

Question

http://jsbin.com/enotab/39/edit我想在不使用2个x轴的情况下在同一个XAxis上显示来自2个不同年份的数据。在这种情况下，我得到以下结果

我想要有一个覆盖图与2系列，其中2012系列成为阴影图。这怎么可能？这是我的静态代码：

var mychart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'container', 
     zoomType: 'x' 
    }, 
    title: { 
     text: 'Chart Title' 
    }, 
    xAxis: [{ 
     type: 'datetime', 
     minRange: 31 * 24 * 3600000, 
     labels: { 
      formatter: function() { 
       return Highcharts.dateFormat('%e %b %y', this.value); 
      } 
     } 
    }], 

yAxis: { 
    title: { 
     text: 'Current Values' 
    }, 
    gridLineColor: 'transparent', 
    plotLines: [{ 
     value: 0, 
     color: 'green', 
     dashStyle: 'longdashdot', 
     width: 1 
    }, { 
     value: 30, 
     color: 'orange', 
     dashStyle: 'longdashdot', 
     width: 1 
    }, { 
     value: 60, 
     color: 'red', 
     dashStyle: 'longdashdot', 
     width: 1 
    }, { 
     value: 80, 
     color: 'black', 
     dashStyle: 'longdashdot', 
     width: 1 
    }] 
}, 

tooltip: { 
    crosshairs: true, 
    shared: true 
}, 

plotOptions: { 
    series: { 
     fillColor: { 
      linearGradient: { 
       x1: 0, 
       y1: 0, 
       x2: 0, 
       y2: 1 
      }, 
      stops: [ 
       [0, Highcharts.getOptions().colors[0]], 
       [1, 'rgba(0,0,0,0.1)'] 
      ] 
     }, 
     lineWidth: 1, 
     shadow: false, 
     marker: { 
      enabled: false, 
      states: { 
       hover: { 
        enabled: true, 
        radius: 5, 
        fillColor: 'red' 
       } 
      } 
     }, 
     states: { 
      hover: { 
       lineWidth: 1 
      } 
     }, 
     threshold: null 
    } //area 
}, //plotoptions 

series: [{ 
    type: 'area', 
    //color:'#89a54e', 
    color: '#4572a7', 
    lineWidth: 0.1, 
    name: '2012', 
// xAxis: 0, 
    zIndex: -1, 
    pointInterval: 24 * 3600 * 1000, 
    pointStart: Date.UTC(2013, 0, 1), 
    data: [ 
     [Date.UTC(2013, 0, 1), 3], 
     [Date.UTC(2013, 0, 2), 12], 
     [Date.UTC(2013, 0, 3), 30], 
     [Date.UTC(2013, 0, 4), 22], 
     [Date.UTC(2013, 0, 5), 12], 
     [Date.UTC(2013, 0, 8), 13], 
     [Date.UTC(2013, 0, 9), 12], 
     [Date.UTC(2013, 0, 11), 13], 
     [Date.UTC(2013, 0, 12), 22], 
     [Date.UTC(2013, 0, 15), 1], 
     [Date.UTC(2013, 0, 16), 25], 
     [Date.UTC(2013, 0, 18), 43], 
     [Date.UTC(2013, 0, 19), 26], 
     [Date.UTC(2013, 0, 20), 23], 
     [Date.UTC(2013, 0, 21), 12], 
     [Date.UTC(2013, 0, 22), 13], 
     [Date.UTC(2013, 0, 23), 22], 
     [Date.UTC(2013, 0, 24), 1], 
     [Date.UTC(2013, 0, 25), 25], 
     [Date.UTC(2013, 0, 26), 43], 
     [Date.UTC(2013, 0, 27), 26], 
     [Date.UTC(2013, 0, 28), 23], 

     [Date.UTC(2013, 0, 29), 12], 
     [Date.UTC(2013, 0, 30), 13], 
     [Date.UTC(2013, 0, 31), 22], 
     [Date.UTC(2013, 1, 1), 1], 
     [Date.UTC(2013, 1, 2), -5], 
     [Date.UTC(2013, 1, 3), 43], 
     [Date.UTC(2013, 1, 4), 26], 
     [Date.UTC(2013, 1, 5), 23], 
     [Date.UTC(2013, 1, 6), 25], 
     [Date.UTC(2013, 1, 7), 43], 
     [Date.UTC(2013, 1, 8), 26], 
     [Date.UTC(2013, 1, 9), 23], 
     [Date.UTC(2013, 1, 10), 35], 
     [Date.UTC(2013, 1, 11), 38], 
     [Date.UTC(2013, 1, 14), 36], 
     [Date.UTC(2013, 1, 15), 3], 
     [Date.UTC(2013, 1, 16), 55], 
     [Date.UTC(2013, 1, 17), 43], 
     [Date.UTC(2013, 1, 18), 22], 
     [Date.UTC(2013, 1, 19), -3] 
    ] 

}, { 
    type: 'line', 
    name: '2013', 
    color: '#89a54e', 
    lineWidth: 3, 
    zIndex: 3, 
    // xAxis:1, 
    pointInterval: 24 * 3600 * 1000, 
    pointStart: Date.UTC(2012, 0, 1), 
    data: [ 
     [Date.UTC(2012, 0, 1), 13], 
     [Date.UTC(2012, 0, 2), 52], 
     [Date.UTC(2012, 0, 3), 3], 
     [Date.UTC(2012, 0, 4), 12], 
     [Date.UTC(2012, 0, 5), 2], 
     [Date.UTC(2012, 0, 6), 35], 
     [Date.UTC(2012, 0, 7), 12], 
     [Date.UTC(2012, 0, 8), 35], 
     [Date.UTC(2012, 0, 9), 22], 
     [Date.UTC(2012, 0, 11), 3], 
     [Date.UTC(2012, 0, 12), 32], 
     [Date.UTC(2012, 0, 15), 41], 
     [Date.UTC(2012, 0, 16), 45], 
     [Date.UTC(2012, 0, 18), 63], 
     [Date.UTC(2012, 0, 19), 16], 
     [Date.UTC(2012, 0, 20), 83], 
     [Date.UTC(2012, 0, 21), 1], 
     [Date.UTC(2012, 0, 22), 75], 
     [Date.UTC(2012, 0, 23), 52], 
     [Date.UTC(2012, 0, 24), 1], 
     [Date.UTC(2012, 0, 25), 65], 
     [Date.UTC(2012, 0, 26), 13], 
     [Date.UTC(2012, 0, 27), 76], 
     [Date.UTC(2012, 0, 28), 56], 

     [Date.UTC(2012, 0, 29), 12], 
     [Date.UTC(2012, 0, 30), 13], 
     [Date.UTC(2012, 0, 31), 22], 
     [Date.UTC(2012, 1, 1), 1], 
     [Date.UTC(2012, 1, 2), 25], 
     [Date.UTC(2012, 1, 3), 43], 
     [Date.UTC(2012, 1, 4), 26], 
     [Date.UTC(2012, 1, 5), 23], 
     [Date.UTC(2012, 1, 6), 25], 
     [Date.UTC(2012, 1, 7), 43], 
     [Date.UTC(2012, 1, 8), 26], 
     [Date.UTC(2012, 1, 9), 23], 
     [Date.UTC(2012, 1, 10), 35], 
     [Date.UTC(2012, 1, 11), 48], 
     [Date.UTC(2012, 1, 14), 86], 
     [Date.UTC(2012, 1, 15), 73], 
     [Date.UTC(2012, 1, 16), 55], 
     [Date.UTC(2012, 1, 17), 43], 
     [Date.UTC(2012, 1, 18), 22], 
     [Date.UTC(2012, 1, 19), -3] 
    ] 
}] 
}); 
}); 

Answer 1

这取决于你想要在x轴上显示什么。如果你只是想保持第一轴标签，然后简单地从第二x轴去除标签和抵消它在第一：

xAxis:[ {type: 'datetime', minRange:31*24 *3600000 , offset:10, 
     labels: {formatter: function() {return Highcharts.dateFormat('%e %b', this.value); 
     } 
    } }, 
    {type: 'datetime', minRange:31*24 *3600000 , offset:10, 
     labels: {enabled:false} 
    }],