Управление несколькими графическими диаграммами на одной веб-странице

Ответ 1

Вы можете использовать jQuery.extend() и Highcharts.setOptions.
Итак, сначала вы сделаете первый объект, который будет расширен всеми вашими диаграммами, этот объект будет содержать ваши функции по умолчанию Highchart.

Вы можете сделать это, используя namespacing.
Следующий способ хорош, когда у вас очень разные диаграммы.

График по умолчанию:

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

ПОЛНОЕ ДЕМО

Ответ 2

Я знаю, что это уже ответили, но я чувствую, что это можно сделать еще дальше. Я все еще новичок в JavaScript и jQuery, поэтому, если кто-то находит что-то не так, или думает, что этот подход нарушает рекомендации или какие-то правила, я был бы благодарен за отзывы.

Основываясь на принципах, описанных Рикардо Ломанном, я создал плагин jQuery, который (на мой взгляд) позволяет Highcharts работать более плавно с jQuery (то есть, как jQuery работает с другими объектами HTML).

Мне никогда не нравилось, что вам нужно предоставить идентификатор объекта в Highcharts, прежде чем он рисует диаграмму. Таким образом, с подключаемым модулем я могу назначить диаграмму стандартным объектам селектора jQuery без необходимости присваивать значение <div> a 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/

Критика приветствуется!!

Ответ 3

Чтобы добавить к @Ricardo отличный ответ, я также сделал что-то очень похожее. На самом деле, я не ошибусь, если я скажу, что я сделал шаг дальше этого. Следовательно, хотел бы поделиться этим подходом.

Я создал обертку над высокоуровневой библиотекой. Это дает много преимуществ, следуя основным преимуществам, которые поощряли идти по этому пути.

• Развязка: Отменяет ваш код от высоких карт
• Easy Upgrades: Эта оболочка будет единственным кодом, который потребует модификации в случае каких-либо взломов изменений в highchart api после обновлений, или даже если вы решите полностью перейти на другую библиотеку диаграмм ( даже от highchart до highstock может быть исчерпывающим, если ваше приложение широко использует диаграммы)
• Простота использования: Обертка api поддерживается очень просто, только объекты, которые могут меняться, отображаются как опции (это тоже значения, которые не будут такими, как глубокий js-объект, например, HC, в основном 1 уровень глубины), каждый из которых имеет значение по умолчанию. Поэтому большую часть времени наше построение диаграммы очень короткое, при этом конструктор принимает объект options всего 4-5 свойств, значения по умолчанию которых не соответствуют диаграмме при создании
• Согласованный UX: Совместимый внешний вид приложения. например: формат и положение подсказки инструмента, цвета, семейство шрифтов, цвета, кнопки панели инструментов (экспорт) и т.д.
• Избегайте дублирования: Конечно, в качестве действительного ответа на заданный вопрос он должен избегать дублирования, и это происходит в огромной степени.

Вот как выглядит 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. Даже если вам нужно установить какое-то свойство, его в основном только истинные/ложные типы, ничего подобного ужасу, который ожидает конструктор highchart (не критикуя их, количество опций, которые они предоставляют, просто удивительно от настройки Point of View, но для каждого разработчика в команда, чтобы понять и освоить это может занять некоторое время)

Таким образом, создание диаграммы так же просто, как

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