javascript - 您如何创建具有相同选项但具有不同数据的多个图表

Question

我喜欢在一个页面上使用相同的选项绘制多个图表，但每个图表使用不同的 json 数据。我喜欢用尽可能少的代码来做到这一点，我真的需要省略代码重复。

这是第一个图表的示例：

$(function() {

    $.getJSON('login.php', function(data) {  
        var options= {
            chart : {
                renderTo : 'container'
            },
            rangeSelector : {
                enabled:false
            },
            series : data
        };

        var chart = new Highcharts.StockChart(options);
    });
});

我如何使用上面的代码来使用不同的 getJSON 数据创建多个图表？

Answer 1

您可以创建一个辅助函数：

$(function() {

    var genOptions = function(data) {
        return {
            chart : {
                renderTo : 'container'
            },
            rangeSelector : {
                enabled:false
            },
            series : data
        };
    };

    $.getJSON('login.php', function(data) {  
        var options = genOptions(data);
        var chart = new Highcharts.StockChart(options);
    });

    $.getJSON('secondpage.php', function(data) {  
        var options = genOptions(data);
        var chart = new Highcharts.StockChart(options);
    });
});

Answer 2

您可以按照 @blam 的示例进行操作，但需要稍作改动。确保每个图表的 chart.renderTo 值不同。从上面的示例中，我注意到只有一个容器值。