highcharts - 在单个网页中管理多个 highchart 图表

Question

我在一个网页中有多个各种类型(条形图、饼图、散点图类型)的 highchart 图表。目前我正在为每个图形创建配置对象，例如，

{
chart : {},
blah blah,
}

并将它们提供给一个自定义函数，该函数将调用 HighCharts.chart() .但这会导致代码重复。我想集中管理所有这些图表渲染逻辑。

关于如何做到这一点的任何想法？

Answer 1

您可以使用 jQuery.extend()和 Highcharts.setOptions .
因此，首先您将创建第一个将被所有图表扩展的对象，该对象将包含您的 Highchart 默认函数。

您可以使用命名空间来实现。
当您有非常不同的图表时，以下方法很好。

默认图形:

var defaultChart = {
    chartContent: null,
    highchart: null,
    defaults: {

        chart: {
            alignTicks: false,
            borderColor: '#656565',
            borderWidth: 1,
            zoomType: 'x',
            height: 400,
            width: 800
        },

        series: []

    },

    // here you'll merge the defauls with the object options

    init: function(options) {

        this.highchart= jQuery.extend({}, this.defaults, options);
        this.highchart.chart.renderTo = this.chartContent;
    },

    create: function() {

        new Highcharts.Chart(this.highchart);
    }

};

现在，如果你想制作柱状图，你将扩展 defaultChart

var columnChart = {

    chartContent: '#yourChartContent',
    options: {

        // your chart options
    }

};

columnChart = jQuery.extend(true, {}, defaultChart, columnChart);

// now columnChart has all defaultChart functions

// now you'll init the object with your chart options

columnChart.init(columnChart.options);

// when you want to create the chart you just call

columnChart.create();

如果您有类似的图表，请使用 Highcharts.setOptions这将在此之后为所有创建的图表应用选项。

// `options` will be used by all charts
Highcharts.setOptions(options);

// only data options
var chart1 = Highcharts.Chart({
    chart: {
        renderTo: 'container1'
    },
    series: []
});

var chart2 = Highcharts.Chart({
    chart: {
        renderTo: 'container2'
    },
    series: []
});

引用

http://api.highcharts.com/highcharts#Highcharts.setOptions%28%29

COMPLETE DEMO