Сложенная область в Highcharts делает мою серию затухающей и исчезающей

Question

У меня довольно простой вопрос (я думаю), когда вы показываете граф сложенной области.

Посмотрите на эту картину:

То, что я хочу, что test1 должен закончиться непосредственно в 2024. Теперь она «гаснуть» на 2028 год То же самое с test2 и test3: Я хочу начать непосредственно в 2028 году и не все начинаются с 2024 года и «исчезают».

Кто-нибудь знает, возможно ли это? Я просмотрел ссылку API, но не нашел ничего подходящего.

DEMO ON JSFIDDLE и код:

$(function() { 
     var yAxisLabels = [0, 20000, 40000, 60000, 80000, 100000, 120000]; 
    var xCategories = ['2016', '2020', '2024', '2028', '2032', '2036', '2040']; 

    $('#container').highcharts({ 
     chart: { 
      type: 'area'    
     }, 
     xAxis: {    
      tickmarkPlacement: 'on', 
      title: { 
       enabled: false 
      }, 
      labels: { 
       formatter: function() { 
        return xCategories[this.value]; 
       } 
      }, 
      startOnTick: false, 
      endOnTick: false, 
      minPadding: 0, 
      maxPadding: 0, 
     }, 
     yAxis: { 
       startOnTick: true, 
      title: { 
       enabled: false 
      }, 
      tickPositioner: function() { 
       return yAxisLabels; 
      }, 
      labels: { 
      formatter: function() { 
       return "€ " + this.value; 
       } 
       } 
     }, 
     tooltip: { 
      shared: true, 
      valueSuffix: ' millions' 
     }, 
     plotOptions: { 
      area: { 
       stacking: 'normal', 
       lineColor: '#666666', 
       lineWidth: 1 
      }, 
      series: { 
       fillOpacity: 1 
      } 
     }, 
     series: [{ 
      name: 'test1', 
      data: [113864, 113864, 113864, 0, 0, 0, 0], 
      color: 'rgba(0,0,0,1)' 
     }, { 
      name: 'test2', 
      data: [0, 0, 0, 87905, 87905, 87905, 87905]    
     }, { 
      name: 'test3', 
      data: [0, 0, 0, 14211, 14211, 14211, 14211] 
     }] 
    }); 
}); 

Answer 1

Это потому, что значение area1 равно нулю, но она будет размещена в верхней части сложенных областей, следовательно, странную форму вы видите. Если поместить данные area1 последний в предоставленном массиве, то данные для area1 заполняется последним и появляется в нижней части, которая выглядит лучше:

series: [{ 
    name: 'test2', 
    data: [0, 0, 0, 87905, 87905, 87905, 87905] 
}, { 
    name: 'test3', 
    data: [0, 0, 0, 14211, 14211, 14211, 14211] 
},{ 
    name: 'test1', 
    data: [113864, 113864, 113864, 0, 0, 0, 0], 
    color: 'rgba(0,0,0,1)' 
}] 

Updated fiddle