2016-07-15 30 views
1

我想做一個這樣的深入圖表http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-drilldown/和我非常接近,但我想循環我的項目輸出到一個數組,並獲得相同的格式作爲演示深入圖表,但它似乎只得到我每個循環中的最後一組項目。我如何保持相同的格式並將它們傳遞到我的數組中? https://jsfiddle.net/pwbz0mxy/將項目傳遞給數組並保持格式?

chart_user_hours = { 
     chart: { 
      type: 'column', 
      renderTo: 'hours_chart_container' 
     }, 
     xAxis: { 
      type: 'category' 
     }, 
     yAxis: { 
      title: { 
       text: 'Total Hours' 
      } 
     }, 
     legend: { 
      enabled: false 
     }, 
     plotOptions: { 
      series: { 
       borderWidth: 0, 
       dataLabels: { 
        enabled: true, 
        format: '{point.y:.2f}' 
       } 
      } 
     }, 

     tooltip: { 
      headerFormat: '<span style="font-size:11px">{series.name}</span><br>', 
      pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}</b> of total<br/>' 
     }, 
     series: [], 
     drilldown: { 
      series: [] 
     } 
    }; 

data = '{"comparison":false,"title":"User Capacity Breakdown | January 2016 to July 2016","series":{"name":"User Hours Breakdown ","colorByPoint":true,"data":{"series":{"data":[{"name":"test","y":10,"drilldown":"test"},{"name":"test","y":154,"drilldown":"test"},{"name":"Large Move","y":29,"drilldown":"Large Move"},{"name":"Invoice 78554","y":20,"drilldown":"Invoice 78554"},{"name":"Small Move*","y":13,"drilldown":"Small Move*"}]}}},"drilldown":{"drilldown":{"series":[{"name":"test","id":"test","work_date":["2016-06-10"],"data":[10]},{"name":"test","id":"test","work_date":["2016-07-11","2016-07-10","2016-07-08","2016-07-06"],"data":[37,51,44,22]},{"name":"Large Move","id":"Large Move","work_date":["2016-07-04","2016-07-05","2016-07-08","2016-07-11"],"data":[9,8,7,5]},{"name":"Invoice 78554","id":"Invoice 78554","work_date":["2016-06-14","2016-06-24"],"data":[10,10]},{"name":"Small Move*","id":"Small Move*","work_date":["2016-06-30","2016-06-03"],"data":[3,9]}]}}}'; 

var obj = $.parseJSON(data); 

      chart_data = typeof obj.series.data.series != 'undefined' ? obj.series.data.series.data : ''; 

      chart_user_hours['series'] = [{ 
       name: obj.series.name, 
       data: chart_data 
      }]; 

      $.each(obj.drilldown.drilldown.series, function(key, value) { 
       chart_user_hours['drilldown']['series'] = [{ 
        name: value.work_date, 
        id: value.id, 
        data: value.data 
       }]; 
      }); 

         var chart_hours = new Highcharts.Chart(chart_user_hours); 
+1

看起來像你正在做一個新的數組每次分配而不是推入$ .each – Dinesh

+0

我該如何去推動數組?如果您在演示中注意到for可能是{name:'',id:'',data:''},{name:'',id:'',data:''} – Suzed

回答

5

要更換你的循環每次chart_user_hours['drilldown']['series']值。所以實際上它看起來像這樣:

聲明數組 - 環

chart_user_hours['drilldown']['series'] = []; 

使用數組push功能之前,在你的數組的末尾添加值 - 在環路

chart_user_hours['drilldown']['series'].push({ 
     name: value.work_date, 
     id: value.id, 
     data: value.data 
});