将项目传递到数组并保持格式?

时间:2016-07-15 06:48:57

标签: javascript

我正在尝试像这样的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 个答案:

答案 0 :(得分:5)

您每次在循环中替换chart_user_hours['drilldown']['series']的值。实际上它必须看起来像这样:

声明数组 - 循环前

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

使用数组的push函数在数组末尾添加值 - In Loop

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