动态地从JSON中包含多个系列的Highcharts

Question

我正在从用户生成的JSON数据HighCharts制作条形图。JSON格式如下:

[{"name":"project1","data":[50291,7410,2013,2013,524,201]},{"name":"project2","data":[1776995,758630,25633,4120054,24521,2045]}]

因为用户选择了项目，所以这个JSON数据也可以是5个项目!我需要能够动态加载系列到我的highcharts。这是我现在的代码。

$(function () {
    var options = {
        chart: {
            renderTo: 'container',
            type: 'column',
            options3d: {
                enabled: true,
                alpha: 0,
                beta: 0,
                depth: 0,
                viewDistance: 25
            }
        },
        title: {
            text: 'Data'
        },
        subtitle: {
            text: 'Dataset'
        },
        plotOptions: {
            column: {
                depth: 0
            }
        },
        series: [],
        xAxis: {
            categories: ['XA', 'XB', 'XC', 'XD', 'XE', 'XF']
        },
        credits: {
            enabled: false
        }
    };
    $.getJSON('/uploads/test.json', function (list) {
        var newseries = {
            name: '',
            data: []
        };
        $.each(list, function (i, item) {
            newseries.name = item.name;
            newseries.data = item.data;
            options.series.push(newseries);
        });
        var chart = new Highcharts.Chart(options);

        function showValues() {
            $('#alpha-value').html(chart.options.chart.options3d.alpha);
            $('#beta-value').html(chart.options.chart.options3d.beta);
            $('#depth-value').html(chart.options.chart.options3d.depth);
        }
        // Activate the sliders
        $('#sliders input').on('input change', function () {
            chart.options.chart.options3d[this.id] = this.value;
            showValues();
            chart.redraw(false);
        });
        showValues();
    });
});

这工作，当我只有一个项目在我的图表，但当有更多的图表以某种方式覆盖自己，只显示JSON中的最后一个项目。有人能帮我解决这个问题吗?

Answer 1

每次循环时，通过在循环外声明newseries对象的name和data节点，将覆盖它们。

I would turn this:

$.getJSON('/uploads/test.json', function (list) {
    var newseries = {
        name: '',
        data: []
    };
    $.each(list, function (i, item) {
        newseries.name = item.name;
        newseries.data = item.data;
        options.series.push(newseries);
    });
    var chart = new Highcharts.Chart(options);

变成这样:

$.getJSON('/uploads/test.json', function (list) {
    var newseries;
    $.each(list, function (i, item) {
        newseries = {};
        newseries.name = item.name;
        newseries.data = item.data;
        options.series.push(newseries);
    });
    var chart = new Highcharts.Chart(options);

虽然实际上，在你的情况下，你根本不需要循环，因为你的返回JSON已经是Highcharts的正确格式了。

你可以试试

$.getJSON('/uploads/test.json', function (list) {
    options.series = list;
    var chart = new Highcharts.Chart(options);

Answer 2

请试试:

$.each(list, function (i, item) {
   if(item.name!=undefined){
       options.series.push({
          name:item.name,
          data:item.data
       });
   }
});