2017-09-05 8 views
1

私はグラフ/グラフ(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)を見つけることができません - それは定義されていないと言います。おそらく、これは私が逃している範囲の要素でもありますか?

ご協力いただきありがとうございます。

答えて

0

は最後に、私はこのような何かを見て、グローバル関数を作成:

function graphInit(graphName, currentGraph, latestDate) { 
    //Date formatting 
    var sevenDays = moment(latestDate).subtract(7, 'days').format("YYYY-MM-DD HH:mm") 
    var thirtyDays = moment(latestDate).subtract(30, 'days').format("YYYY-MM-DD HH:mm") 
    var oneWeek = moment(latestDate).subtract(1, 'weeks').format("YYYY-MM-DD HH:mm") 
    var twoWeeks = moment(latestDate).subtract(2, 'weeks').format("YYYY-MM-DD HH:mm") 
    var fourWeeks = moment(latestDate).subtract(4, 'weeks').format("YYYY-MM-DD HH:mm") 
    var threeMonths = moment(latestDate).subtract(3, 'months').format("YYYY-MM-DD HH:mm") 
    var sixMonths = moment(latestDate).subtract(6, 'months').format("YYYY-MM-DD HH:mm") 
    var oneYear = moment(latestDate).subtract(1, 'years').format("YYYY-MM-DD HH:mm") 
    var twoYears = moment(latestDate).subtract(2, 'years').format("YYYY-MM-DD HH:mm") 
     //nullify the xAxes scale (Used to default to auto when switching scales) 
    function nullXAxes() { 
     currentGraph.options.scales.xAxes[0].time.min = null; 
     currentGraph.options.scales.xAxes[0].time.max = null; 
     $(this).addClass('active'); 
     currentGraph.update(); 
    } 
    //reset the xAxes scale to specified min/max 
    function xAxesScale(min, max) { 
     currentGraph.options.scales.xAxes[0].time.min = min; 
     currentGraph.options.scales.xAxes[0].time.max = max; 
     $(this).addClass('active'); 
     currentGraph.update(); 
    } 

    //init scaling 
    $("#" + graphName + "Daily,#" + graphName + "Weekly,#" + graphName + "Monthly,#" + graphName + "Yearly").hide(); 
    //left-side click parameters 
    $("#" + graphName + "Auto").click(function() { 
     currentGraph.options.scales.xAxes[0].time.unit = null; 
     $("#" + graphName + "Daily,#" + graphName + "Weekly,#" + graphName + "Monthly,#" + graphName + "Yearly").hide(); 
     nullXAxes(); 
    }); 
    $("#" + graphName + "Day").click(function() { 
     currentGraph.options.scales.xAxes[0].time.unit = 'day' 
     $("#" + graphName + "Weekly,#" + graphName + "Monthly,#" + graphName + "Yearly").hide() 
     $("#" + graphName + "Daily").fadeIn(); 
     nullXAxes(); 
    }); 
    $("#" + graphName + "Week").click(function() { 
     currentGraph.options.scales.xAxes[0].time.unit = 'week' 
     $("#" + graphName + "Daily,#" + graphName + "Monthly,#" + graphName + "Yearly").hide() 
     $("#" + graphName + "Weekly").fadeIn(); 
     nullXAxes(); 
    }); 
    $("#" + graphName + "Month").click(function() { 
     currentGraph.options.scales.xAxes[0].time.unit = 'month' 
     $("#" + graphName + "Daily,#" + graphName + "Weekly,#" + graphName + "Yearly").hide() 
     $("#" + graphName + "Monthly").fadeIn(); 
     nullXAxes(); 
    }); 
    $("#" + graphName + "Year").click(function() { 
     currentGraph.options.scales.xAxes[0].time.unit = 'year' 
     $("#" + graphName + "Daily,#" + graphName + "Weekly,#" + graphName + "Monthly").hide() 
     $("#" + graphName + "Yearly").fadeIn(); 
     nullXAxes(); 
    }); 
    //right-side click parameters 
    $("#" + graphName + "AutoDay,#" + graphName + "AutoWeek,#" + graphName + "AutoMonth,#" + graphName + "AutoYear").click(function() { 
     nullXAxes() 
    }); 
    $("#" + graphName + "7Day").click(function() { 
     xAxesScale(sevenDays, latestDate) 
    }); 
    $("#" + graphName + "30Day").click(function() { 
     xAxesScale(thirtyDays, latestDate) 
    }); 
    $("#" + graphName + "1Week").click(function() { 
     xAxesScale(oneWeek, latestDate) 
    }); 
    $("#" + graphName + "2Week").click(function() { 
     xAxesScale(twoWeeks, latestDate) 
    }); 
    $("#" + graphName + "4Week").click(function() { 
     xAxesScale(fourWeeks, latestDate) 
    }); 
    $("#" + graphName + "3Month").click(function() { 
     xAxesScale(threeMonths, latestDate) 
    }); 
    $("#" + graphName + "6Month").click(function() { 
     xAxesScale(sixMonths, latestDate) 
    }); 
    $("#" + graphName + "1Year").click(function() { 
     xAxesScale(oneYear, latestDate) 
    }); 
    $("#" + graphName + "2Year").click(function() { 
     xAxesScale(twoYears, latestDate) 
    }); 
}; 

をそして、我々は、グラフを作成し、割り当てられた後graphInit(whateverGraph、currentGraph、latestDate)の機能を呼び出すことを確認しましたそれは変数(currentGraph)です。これは、コードの少なくとも1/4を節約し、よりモジュラー化しました。

関連する問題