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



Answers

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

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

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

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

Question

У меня есть несколько высокоширотных диаграмм различных типов (Bar, Pie, Scatter type) на одной веб-странице. В настоящее время я создаю объект конфигурации для каждого графика, например,

{
chart : {},
blah blah,
}

И подавая их на пользовательскую функцию, которая просто вызовет HighCharts.chart() . Но это приводит к дублированию кода. Я хочу централизованно управлять всей этой диаграммой.

Любая идея о том, как это сделать?




Related