fillColor在面积图中堆积

Question

这是链接到我的fiddle。

$(function() { 
var chartConfig = { 
    title: { 
     text: '', 
     style: 'display:none' 
    }, 
    chart: { 
     renderTo: 'container', 
     type: 'area' 
    }, 
    showAxes: false, 
    xAxis: { 
     labels: { 
      enabled: true 
     }, 
     tickLength: 0, 
     lineWidth: 0, 
     minorGridLineWidth: 0, 
     gridLineWidth: 0, 
     max: 275 
    }, 
    yAxis: { 
     labels: { 
      enabled: true 
     }, 
     title: { 
      enabled: false 
     }, 
     gridLineWidth: 0, 
     minorGridLineWidth: 0, 
     plotLines: [{ 
      value: 0, 
      width: 1, 
      color: '#808080' 
     }], 
     max: 200 
    }, 
    plotOptions: { 
     series: { 
      marker: { 
       enabled: false 
      } 
     }, 
     column: { 
      stacking: 'normal' 
     }, 
     area: { 
      pointStart: 20, 
      lineColor: '#E8D0D0', 
      lineWidth: 1, 
      marker: { 
       enabled: false, 
       symbol: 'circle', 
       radius: 2, 
       lineWidth: 1, 
       lineColor: '#666666' 
      } 
     } 
    }, 
    legend: { 
     layout: 'vertical', 
     align: 'right', 
     verticalAlign: 'middle', 
     borderWidth: 0, 
     enabled: false 
    } 
}; 
var series = [{ 
    data: [[85, 0], [155, 220]], 
    lineColor: "#E8D0D0", 
    fillColor: "#E8D0D0", 
    showLegend: false 
}, { 
    data: [[115, 0], [215, 220]], 
    lineColor: "#D1A1A1", 
    showLegend: false, 
    fillColor: "#D1A1A1" 
}, { 
    data: [[145, 0], [265, 220]], 
    showLegend: false, 
    lineColor: "#BB8977", 
    fillColor: "#BB8977" 
}]; 
    chartConfig.series = series; 
    var hChart = new Highcharts.Chart(chartConfig); 
}); 

正如你所看到的，我有一系列的数据在每个数据系列之间的最大范围导致空白后结束。

其实我想要的图形，以接近这样的事情 - http://imgur.com/qyPpe6G

如何使用“叠加”模式，这个图表上的任何想法？

谢谢。

Answer 1

如果您需要堆，你应该有共同的x值比如上例中

http://jsfiddle.net/DXHDT/

所以你的情况也可以是这样的：

var series = [{ 
    data: [[85, 0], [155, 220],[265, 220]], 
    lineColor: "#E8D0D0", 
    fillColor: "#E8D0D0", 
    showLegend: false 
}, { 
    data: [[115, 0], [215, 220],[265, 220]], 
    lineColor: "#D1A1A1", 
    showLegend: false, 
    fillColor: "#D1A1A1" 
}, { 
    data: [[145, 0], [265, 220]], 
    showLegend: false, 
    lineColor: "#BB8977", 
    fillColor: "#BB8977" 
}]; 

http://jsfiddle.net/43xEW/3/