2016-07-15 12 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

配列にプッシュする方法を教えてください。あなたがデモで気付いたのは、{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 }); 
関連する問題