1 つの Web ページにさまざまなタイプ (棒グラフ、円グラフ、散布図タイプ) の複数のハイチャート チャートがあります。現在、次のような各グラフの構成オブジェクトを作成しています。
{
chart : {},
blah blah,
}
そして、それらを呼び出すだけのカスタム関数にフィードしますHighCharts.chart()。ただし、これによりコードが重複します。このすべてのチャート レンダリング ロジックを一元的に管理したいと考えています。
これを行う方法についてのアイデアはありますか?
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: []
});
参照
これはすでに回答されていることは知っていますが、さらに先に進むことができると感じています。私はまだ JavaScript と jQuery に慣れていないので、誰かが間違っていることを見つけたり、このアプローチが何らかのガイドラインや経験則に違反していると思われる場合は、フィードバックをいただければ幸いです。
Ricardo Lohmann が説明した原則に基づいて、jQuery プラグインを作成しました。これにより、(私の意見では) Highcharts が jQuery とよりシームレスに連携できるようになります (つまり、jQuery が他の HTML オブジェクトと連携する方法)。
グラフを描画する前に、オブジェクト ID を 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 呼び出しを 1 つにまとめて、各グラフのオプションとデータを 1 つの JavaScript 配列にプッシュすることもできます。
必須の jFiddle の例は次のとおりです: http://jsfiddle.net/3GYHg/1/
批判大歓迎!!
@Ricardoの素晴らしい答えに追加するために、私も非常に似たようなことをしました。実際、これよりも一歩進んだと言っても間違いではありません。したがって、アプローチを共有したいと思います。
ハイチャート ライブラリのラッパーを作成しました。これにより、複数の利点が得られます。この道を進むことを奨励した主な利点は次のとおりです。
options作成中のチャートにデフォルトが適合しない 4 ～ 5 個のプロパティを持つ 1 つのオブジェクトを取得します。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]]
});