2015-01-15 3 views
0

CSV에서 가져온 데이터로 스택 막대 차트를 구현하려고합니다. 시리즈 :을 "John, 10,5,3,4,1"과 같은 CSV 파일의 데이터로 업데이트해야합니다. 제발 도와주세요!CSV에서 Highchart 스택 된 막대 데이터

내가 마침내 작동있어

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'bar' 
     }, 
     title: { 
      text: 'Stacked bar chart' 
     }, 
     xAxis: { 
      categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] 
     }, 
     yAxis: { 
      min: 0, 
      title: { 
       text: 'Total fruit consumption' 
      } 
     }, 
     legend: { 
      reversed: true 
     }, 
     plotOptions: { 
      series: { 
       stacking: 'normal' 
      } 
     }, 
     series: [{ 
      name: 'John', 
      data: [5, 3, 4, 7, 2] 
     }, { 
      name: 'Jane', 
      data: [2, 2, 3, 2, 1] 
     }, { 
      name: 'Joe', 
      data: [3, 4, 4, 2, 5] 
     }] 
    }); 
}); 

UPDT하지만 여전히 문제가있다. 막대는 거꾸로되어 있으며 CSV 파일과 동일한 순서로 정확하게 표시해야합니다. 나는 전설에서와 동일한 순서로 적층 된 바 필요

Disconnection,30,30 
Site Care,12,12 
Documentation,35,35 
Lining,22,22 
Connection,70,52 

: http://i.stack.imgur.com/6EkHg.png

+0

방법처럼 CSV 파서 모습? –

답변

0

당신을 CSV 파일의

$.get('chart.csv', function(data) { 
          var lines=data.split('\n'); 
          $.each(lines, function(lineNo, line) { 
          var items = line.split(','); 
          var series = { 
           data: [] 
          }; 
          $.each(items, function(itemNo, item) { 
           if (itemNo == 0) { 
            series.name = item; 
           } else { 
            series.data.push(parseFloat(item)); 
           } 
          }); 
          options.series.push(series); 
          }); 
          var chart = new Highcharts.Chart(options); 

내용 : 여기

내 파서이다 막대의 반전을 수정하기 위해 차트를 렌더링하기 전에 계열 인덱스를 사용자 지정하여 설정할 수 있습니다. 이 같은

뭔가 트릭을 할 수 있습니다

for (var i = 0; i < options.series.length; i++) { 
     options.series[i].index = options.series.length - 1 - i; 
     options.series[i].legendIndex = i; 
    } 
+0

나는 이미 제대로 작동하고 있습니다. 이제 CSV 파일이 역순으로 생성되고 차트가 올바르게 표시됩니다. 어쨌든 고마워! –