在单个网页中管理多个高清图表

Question

我在一个网页中有多种不同类型的高图表(Bar,Pie,Scatter类型).目前我正在为每个图创建配置对象,比如

{
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

完成演示

Answer 2

我知道这已经得到了回答,但我觉得可以采取进一步的措施.我仍然对JavaScript和jQuery很新,所以如果有人发现任何错误,或者认为这种方法违反指导方针或某种规则,我会很感激反馈.

基于Ricardo Lohmann描述的原则,我创建了一个jQuery插件,(在我看来)允许Highcharts与jQuery更加无缝地工作(即jQuery与其他HTML对象一起工作的方式).

我从来不喜欢在绘制图表之前必须向Highcharts提供对象ID这一事实.因此,与该插件,我可以分配图表到标准jQuery选择对象,而不必得到含有<div>的id值.

(function($){
    var chartType = {
        myArea : {
            chart: { type: 'area' },
            title: { text: 'Example Line Chart' },
            xAxis: { /* xAxis settings... */ },
            yAxis: { /* yAxis settings... */ },
            /* etc. */
            series: []
        },
        myColumn : {
            chart: { type: 'column' },
            title: { text: 'Example Column Chart' },
            xAxis: { /* xAxis settings... */ },
            yAxis: { /* yAxis settings... */ },
            /* etc. */
            series: []
        }
    };
    var methods = {
        init:
            function (chartName, options) {
                return this.each(function(i) {
                    optsThis = options[i];
                    chartType[chartName].chart.renderTo = this;
                    optsHighchart = $.extend (true, {}, chartType[chartName], optsThis);
                    new Highcharts.Chart (optsHighchart);
                });
            }
    };
    $.fn.cbhChart = function (action,objSettings) {
        if ( chartType[action] ) {
            return methods.init.apply( this, arguments );
        } else if ( methods[action] ) {
            return methods[method].apply(this,Array.prototype.slice.call(arguments,1));
        } else if ( typeof action === 'object' || !action ) {
            $.error( 'Invalid arguments to plugin: jQuery.cbhChart' );
        } else {
           $.error( 'Action "' +  action + '" does not exist on jQuery.cbhChart' );
        }
    };
})(jQuery);

有了这个插件,我现在可以按如下方式分配图表:

$('.columnChart').cbhChart('myColumn', optionsArray);

这当然是一个简单的例子; 举一个真实的例子,你必须创建更复杂的图表属性.但这是我们在这里关注的原则,我发现这种方法解决了原始问题.它重复使用代码,同时仍然允许逐个应用各个图表更改.

原则上,它还允许您将多个Ajax调用组合在一起,将每个图形的选项和数据推送到单个JavaScript数组中.

强制性的jFiddle示例如下:http://jsfiddle.net/3GYHg/1/

批评欢迎!!