如何使用相同的选项但使用不同的数据创建多个图表

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值不同。从上面的例子中我只注意到一个容器值。