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





highstock download (4)


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

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

  • Развязка: Отменяет ваш код от высоких диаграмм
  • Easy Upgrades: эта оболочка будет единственным кодом, который потребует модификации в случае каких-либо взломов изменений в highchart api после обновлений или даже если вы решите перейти в другую библиотеку диаграмм (даже с highchart на highstock может быть исчерпывающим, если ваш приложение широко использует графики)
  • Простота использования: обертка api поддерживается очень просто, только объекты, которые могут меняться, отображаются как параметры (это тоже значения, которые не будут такими, как глубокий объект js, например, HC, уже имеют, в основном, 1 уровень глубины), каждый из которых имеет значение по умолчанию стоимость. Поэтому большую часть времени наше построение диаграммы очень короткое, при этом конструктор принимает 1 объект объектов с 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]]
         });

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

{
chart : {},
blah blah,
}

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

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




Я знаю, что об этом уже ответили, но я чувствую, что это можно сделать еще дальше. Я по-прежнему новичок в 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/

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




Вы можете использовать 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: []
});

Справка

ПОЛНАЯ ДЕМО




Ссылки масштабирования являются индексом массива, поэтому, если вы хотите выбрать рендер по умолчанию, установите следующие параметры: rangeSelector: {selected: index_of_array}, в моем случае для select «all» установлено selected: 5





highcharts highstock