Javascript HighCharts从不同的格式阅读

时间:2017-01-04 11:46:43

标签: javascript highcharts

我正在使用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

我该怎么做?

1 个答案:

答案 0 :(得分:0)

这应该让你开始:

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

如果单击某列,则会读取mydata并显示子项。要获得subItem计数,只需使用mydata.items [i] [&#39; subitems&#39;] .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
            }]
          });
        }
},