Javascript HighCharts異なるフォーマットからの読み込み

Question

私はHighchartsを使用しています。私は現在、読み込みをやめてオブジェクトからデータを読み込みたい2つの配列を持っています。

items = ['Item 1', 'Item 2']; 
Quantity = [10 , 5]; 

     jQuery('#container').highcharts({ 

      chart: { 
       type: 'column' 
      }, 
      xAxis: { 
       categories: mydata 
      }, 
      title: { 
       text: 'Items Title' 
      }, 
      series: [{ 
       name: 'Items', 
       data: Quantity 
      }], 
      tooltip: { 
       pointFormat: '<span style="color:{series.color}">{series.name}<br/>', 
       shared: true 
      }, 


      plotOptions: { 

       series: { 
        cursor: 'pointer', 
        point: { 
         events: { 
          click: function() { 

           console.log('Clicked'); 


          }, 
         }, 
        }, 
       }, 

      }, 

     });  

The above displays 2 items of height 10 and 5. 

Now what I need to do is to be able to read this data instead: 

var mydata = { 
    "items":[{ 
     "id":"123", 
     "name":"item name here", 
     "subitems":[{ 
      "id":"567", 
      "name":"subitem 1" 
     }, 
      { 
       "id":"657", 
       "name":"subitem 2" 
      }], 

     "somthing here":null, 
    }, 
     { 
      "id":"456", 
      "name":"item name here too", 
      "subitems":[{ 
       "id":"567", 
       "name":"subitem here" 
      }, 
       { 
        "id":"657", 
        "name":"subitem here roo" 
       }], 

      "somthing here":null, 
     }] 
}; 

量の値は、サブ項目がそれ以上のデータの場合にはそれほどカウントする必要が2,2

私はどうすればよいでしょう。ここ

は私が現在持っているコードがありますこの？

Answer 1

これはあなたが始める必要があります。

https://jsfiddle.net/b3wii/0Lx77f1a

をあなたはそれがMYDATAを読み取り、サブ項目を表示する列をクリックします。サブアイテム数を取得するには、mydata.items [i] ['subitems']。lengthを使用します。既存のItem値を更新するには、currentItemYまたはcurrentItemXを変更します。

click: function (e) { 
     if(this.series.name != 'SubItems'){ 
      let currentItemName = items[this.index]; 
      let currentItemY = this.y; 
      let currentItemX = this.x; 

      let newCategories = []; 
      let newSeries = []; 

      for(let i in mydata.items){ 
      if(mydata.items[i]['name'] == currentItemName){ 
       for(let j in mydata.items[i]['subitems']){ 
       newCategories.push(mydata.items[i]['subitems'][j]['name']); 
       newSeries.push(mydata.items[i]['subitems'][j]['quantity']); 
       } 
      } 
      } 

      chart.update({ 
      xAxis: { 
       categories: newCategories 
      }, 
      series: [{ 
       name: 'SubItems', 
       data: newSeries 
      }] 
      }); 
     } 
},