javascript - 动态加载系列 HighCharts

Question

我正在尝试根据用户选择的项目动态加载多个系列。我正在使用 Laravel 5.2、PHP 5.6 和 HighCharts。我设法加载了一个 JSON 文件，该文件是在用户选择项目时生成的。但我希望 JavaScript 能够解析来自 JSON 文件的不同系列并将其动态加载到系列中。这是我正在使用的代码:

$(function () {
    // Set up the chart
    var processed_json = new Array();
    $.getJSON('/uploads/test.json', function(data) {
        for (i = 0; i < data.length; i++) {
            processed_json.push([data[i].key, data[i].value]);
        }
        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column',
                options3d: {
                    enabled: true,
                    alpha: 0,
                    beta: 0,
                    depth: 0,
                    viewDistance: 25
                }
            },
            title: {
                text: 'Grades'
            },
            subtitle: {
                text: 'Dataset'
            },
            plotOptions: {
                column: {
                    depth: 0
                }
            },
            series: [{
                name: 'Grades',
                data: processed_json
            }],

            credits: {
                enabled: false
            }
        });

        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 格式如下:

[{"key":"Math","value":6},{"key":"Biology","value":"8"},{"key":"English","value":"7"},{"key":"Gym","value":"4"}]

所以我希望在一个文件中有更多这样的 JSON，以便在 Javascript 中解析并加载到系列中。

谢谢!

编辑感谢您的回复。我已经编辑了我的代码:

$(function () {

var processed_json = new Array();
        var options = {    
                chart: {
                    renderTo: 'container',
                    type: 'column',
                    options3d: {
                        enabled: true,
                        alpha: 0,
                        beta: 0,
                        depth: 0,
                        viewDistance: 25
                    }
                },
                title: {
                    text: 'Grades'
                },
                subtitle: {
                    text: 'Dataset'
                },
                plotOptions: {
                    column: {
                        depth: 0
                    }
                },
                series: [{

                }],

                credits: {
                    enabled: false
                }
            };

        $.getJSON('/uploads/test.json', function(data) {
            for (i = 0; i < data.length; i++) {
                processed_json.push([data[i].key, data[i].value]);
            }
        });
            options.series[0].remove();
            options.series[0].setData = {
                name: 'Grades',
                data: processed_json
            }


        var chart = new Highcharts.Chart(options);
        chart.redraw(true);
        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();

});

但是什么都没有显示，报如下错误

TypeError: options.series[0].remove is not a function

我也试过

var chart = new Highcharts.Chart(options);
            chart.series[0].remove();
            chart.series[0].setData = {
                name: 'Grades',
                data: processed_json
            }
        chart.redraw(true);

但这给出了:

TypeError: Cannot set property 'setData' of undefined

Answer 1

我认为 highcharts 有一个用于添加新系列的方法 chart.addSeries。如果您想用新系列替换当前系列，您可以尝试先使用 chart.series[0].remove( ) 删除当前系列，然后使用 chart 添加新系列。添加系列。 chart.addSeries 的参数可以是像您的
这样的对象{
名称:'等级'，
数据:processed_json
}