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"}]

所以我希望在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.addSeries添加新系列。 chart.addSeries的参数可以是像您一样的对象 { name: 'Grades', data: processed_json }

Answer 2

然后，使用加载数据定义方法。例如：

function(chart) {
    $.each(chart.series, function(i, v){
        chart.series[i].remove(true);
    });
    chart.addSeries({your_data}, true);
}

检查http://api.highcharts.com/highcharts/Chart.addSeries/Chart.addSeries 在我的webapp中，我使用15种类型的图表中的10种高图，并且所有动态加载和工作正常:) Highcharts非常棒。

动态加载HighCharts

2 个答案: