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