来自 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 节点，方法是将它们声明在循环之外。

我会转这个：

$.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
       });
   }
});