2013-05-09 3 views
0

하이 차트의 누적 세로 막 대형 차트에 새로운 (첫 번째 렌더링 후) 시리즈가 추가되는 순서를 제어하려고합니다. 현재 addSeries를 사용하면 새롭게 추가 된 시리즈가 스택 맨 아래에 추가됩니다. http://jsfiddle.net/6bCBf/하이 차트 스택 된 세로 막 대형 차트 맨 위에 새 시리즈 추가

이 하나가 Highcharts가 새로운 시리즈를 삽입/역 제어하는 ​​방법을 생각할 수있다 : 여기서 다음은이의 바이올린이야 내가

var chart = new Highcharts.Chart({ 

    chart: { 
     type: 'column', 
     renderTo: 'container' 
    }, 

    xAxis: { 
     categories: ['Jan', 'Feb', 'Mar'] 
    }, 

    plotOptions: { 
     series: { 
      stacking: 'normal' 
     } 
    }, 

    series: [{ 
     name: 'base', 
     data: [10, 20, 30] 
    }, { 
     name: 'sec', 
     data: [30, 20, 10] 
    }] 
}); 

var i = 0; 
$('#add').on('click', function (e) { 
    chart.addSeries({ 
     data: [32, 43, 42], 
     name: ++i, 
     index: 0 //?????? 
    }); 
}); 

을 뭘하는지의 단순화 된 버전이다?

새로운 시리즈의 색인을 0으로 설정하려고 시도했지만 아무 것도 수행하지 않습니다. -1로 설정하면 배열의 맨 아래에 새 시리즈가 추가되지만 '스태킹'이 제대로 작동하지 않습니다.

답변

5

인덱스와 zIndex를 설정하여 레이어간에 순서를 유지 한 다음 적절한 매개 변수가있는 시리즈를 추가 할 수 있습니다.

예 : http://jsfiddle.net/6bCBf/5/

var chart = new Highcharts.Chart({ 

    chart: { 
     type: 'column', 
     renderTo: 'container' 
    }, 

    xAxis: { 
     categories: ['Jan', 'Feb', 'Mar'] 
    }, 

    plotOptions: { 
     series: { 
      stacking: 'normal' 
     } 
    },  

    series: [ 
     { 
      name: 'base', 
      data: [10, 20, 30], 
      index:2, 
      zIndex:10 
     }, 
     { 
      name: 'sec', 
      data: [30, 20, 10], 
      index:1, 
      zIndex:9 
     } 
    ] 
},function(chart){ 



    $('#add').on('click', function (e) { 

     chart.addSeries({ 
      data: [32, 43, 42], 
      index: 0, 
      zIndex:1 
     }); 
    }); 


}); 
+0

위대한 작품! 고마워!, 그 이상한 당신이 명령을 단순히 반대로 두 가지를 조정할 필요가 ... – Jaime