javascript - 具有来自 JSON Dynamically 的多个系列的 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);

相反(未经测试，可能需要调整)。