私はグラフ/グラフ(chart.jsを使用)でいくつかの機能を作成しています。私は働くものを作りました。 4つのグラフがあるので、このコードを再利用し、変更された部分を置き換えて&を見つけると、膨大で非効率な文書を作成したくありません。代わりに、私は一度作成されたテンプレートオブジェクトを作成し、テンプレート/汎用変数名をそのグラフの独自のプロパティに置き換えたいと考えています。ここでテンプレートを作成し、JSで置換する変数を使用する
は、私が作成したコードの要約版です:
$("#engagementDaily").hide();
$("#engagementWeekly").hide();
$("#engagementMonthly").hide();
$("#engagementYearly").hide();
$("#engagementDay").click(function(){
engGraph.options.scales.xAxes[0].time.unit = 'day'
$(this).addClass('active');
nullXAxes();
$("#engagementDaily").fadeIn();
$("#engagementWeekly").hide();
$("#engagementMonthly").hide();
$("#engagementYearly").hide();
engGraph.update();
});
$("#engagementWeek").click(function(){
engGraph.options.scales.xAxes[0].time.unit = 'week'
$(this).addClass('active');
nullXAxes();
$("#engagementDaily").hide();
$("#engagementWeekly").fadeIn();
$("#engagementMonthly").hide();
$("#engagementYearly").hide();
engGraph.update();
});
$("#engagementMonth").click(function(){
engGraph.options.scales.xAxes[0].time.unit = 'month'
$(this).addClass('active');
nullXAxes();
$("#engagementDaily").hide();
$("#engagementWeekly").hide();
$("#engagementMonthly").fadeIn();
$("#engagementYearly").hide();
engGraph.update();
});
$("#engagementYear").click(function(){
engGraph.options.scales.xAxes[0].time.unit = 'year'
$(this).addClass('active');
nullXAxes();
$("#engagementDaily").hide();
$("#engagementWeekly").hide();
$("#engagementMonthly").hide();
$("#engagementYearly").fadeIn();
engGraph.update();
});
$("#engagementAutoDay").click(function(){
engGraph.options.scales.xAxes[0].time.min = null;
engGraph.options.scales.xAxes[0].time.max = null;
$(this).addClass('active');
engGraph.update();
});
$("#engagementAutoWeek").click(function(){
engGraph.options.scales.xAxes[0].time.min = null;
engGraph.options.scales.xAxes[0].time.max = null;
$(this).addClass('active');
engGraph.update();
});
$("#engagementAutoMonth").click(function(){
engGraph.options.scales.xAxes[0].time.min = null;
engGraph.options.scales.xAxes[0].time.max = null;
$(this).addClass('active');
engGraph.update();
});
$("#engagementAutoYear").click(function(){
engGraph.options.scales.xAxes[0].time.min = null;
engGraph.options.scales.xAxes[0].time.max = null;
$(this).addClass('active');
engGraph.update();
});
$("#engagement7Day").click(function(){
engGraph.options.scales.xAxes[0].time.min = sevenDays;
engGraph.options.scales.xAxes[0].time.max = latestDate;
$(this).addClass('active');
engGraph.update();
});
//Et Cetera, et cetera
理想的には私は私は置き換えることができますスクリプトのルートスコープ、内のオブジェクトに生きることができるテンプレートにこれを有効にしたいのですがそのチャート/グラフの名前を持つ要素を繰り返す - このような何か:
var graphTemplate = function(currentGraph, currentGraphShort)
と
$("#" + currentGraph + "Daily").hide();
/////
[currentGraphShort].options.scales.xAxes[0].time.unit = 'day'
しかし、私の実験はうまくいきませんでした。私はTemplate Literalsを使って見ました。しかしそれらは文字列(Iv'eが使ったもの)からもっと多く使われているようです。私も[currentGraphShort]["options"]["scales"]["xAxes[0]"]["time"]["unit"] = 'day'
のようなオブジェクトを作成しようとしましたが、それも動作しません...
おそらく解決策は私が見落としている単純ですが、私はこの1つで手を愛するだろう!
は)=ありがとう
編集:
は私がグローバルルートスコープ内の関数として実行されていた正確なコードを追加して、グラフの機能の中でそれを実行してみました。しかしそれは私のグラフ(engGraph)を見つけることができません - それは定義されていないと言います。おそらく、これは私が逃している範囲の要素でもありますか?
ご協力いただきありがとうございます。