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

COMPLETE DEMO

Answer 2

我知道这已经得到了回答，但我觉得可以进一步采取行动。我仍然对JavaScript和jQuery很新，所以如果有人发现任何错误，或者认为这种方法违反了某种指导方针或经验法则，我将非常感谢您的反馈。

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

我从来不喜欢在绘制图表之前必须向Highcharts提供对象ID这一事实。因此，通过插件，我可以将图表分配给标准jQuery选择器对象，而不必将包含<div>的{{1}}值赋予。

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);

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

原则上，它还允许您将多个Ajax调用组合成一个，将每个图形的选项和数据推送到一个JavaScript数组中。

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

批评欢迎!!

Answer 3

为了增加@ Ricardo的好答案，我也做了一些非常相似的事情。事实上，如果我说我比这更进一步，我也不会错。因此，我想分享这种方法。

我在高图库上创建了一个包装器。这带来了多种好处，这是鼓励进入这条道路的主要优势

解耦：将您的代码与highcharts解耦
轻松升级：这个包装器是唯一需要修改的代码，以便在升级后的highchart api中发生任何重大更改，或者即使决定一起移动到不同的图表库（如果您的应用程序广泛使用图表，即使从highchart到highstock也可以是详尽的）
易于使用：包装器api保持非常简单，只有可能变化的东西才会作为选项公开（那些值也不会像HC那样的深js对象，大多是1级深度），每个都有一个默认值。因此，大多数情况下，我们的图表创建非常短，构造函数只使用1 options个对象，只有4-5个属性，其默认值不适合创建的图表
一致的用户体验：一致的外观＆amp;感觉整个应用程序。例如：工具提示格式＆amp;位置，颜色，字体系列，颜色，工具栏（导出）按钮等
避免重复：当然作为问题的有效答案，它必须避免重复，并且在很大程度上确实存在重复

以下是options的默认值

defaults : {
        chartType : "line", 
        startTime : 0,
        interval : 1000,
        chartData : [],
        title : "Product Name",
        navigator : true,
        legends : true,
        presetTimeRanges : [],
        primaryToolbarButtons : true,
        secondaryToolbarButtons : true,
        zoomX : true,
        zoomY : false,
        height : null,
        width : null,
        panning : false,
        reflow : false,
        yDecimals : 2,
        container : "container",
        allowFullScreen : true,
        credits : false,
        showAll : false,
        fontSize : "normal", // other option available is "small"
        showBtnsInNewTab : false,
        xAxisTitle : null,
        yAxisTitle : null,
        onLoad : null,
        pointMarkers : false,
        categories : []
}

正如您所看到的，大多数时候，只有chartData才会发生变化。即使你需要设置一些属性，它主要只是真/假类型，没有像高图构造函数所期望的那样（不批评它们，它们提供的选项数量从定制的观点来看是惊人的，但对于每个开发人员而言团队理解和掌握它可能需要一些时间）

因此，创建图表就像

一样简单

var chart=new myLib.Chart({
              chartData : [[1000000,1],[2000000,2],[3000000,1],[4000000,5]]
         });

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

3 个答案: