同じページ（chartjs）の複数のグラフ、コンストラクタ/プロトタイプパターンコードの構成

Question

こんにちは、複数のグラフ/グラフが同じページにある状況をテストしていますが、現在テスト目的で2つありますが、つまり、コンストラクタ/プロトタイプパターンを使用し、ボタンをクリックしたときにグラフが表示され、エラーが発生しないように、コードを正しく構成しているかどうかを知りたいと思います。ここ

コードサンプル

var showGraphs = (function() { 

function showGraphs() { 
} 

//grahp1 
var ctx1 = document.getElementById("myGraph1").getContext("2d"); 
var data1 = { 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
    datasets: [ 
     { 
      label: "My First dataset", 
      backgroundColor: "rgba(255,99,132,0.2)", 
      borderColor: "rgba(255,99,132,1)", 
      borderWidth: 1, 
      hoverBackgroundColor: "rgba(255,99,132,0.4)", 
      hoverBorderColor: "rgba(255,99,132,1)", 
      data: [65, 59, 80, 81, 56, 55, 40], 
     } 
    ] 
}; 


//graph2 
var ctx = document.getElementById("myGraph2").getContext("2d"); 
var randomScalingFactor = function() { 
    return Math.round(Math.random() * 100); 
}; 
var randomColorFactor = function() { 
    return Math.round(Math.random() * 255); 
}; 
var randomColor = function(opacity) { 
    return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')'; 
}; 

var config = { 
    type: 'doughnut', 
    data: { 
     datasets: [{ 
      data: [ 
       randomScalingFactor(), 
       randomScalingFactor(), 
       randomScalingFactor(), 
       randomScalingFactor(), 
       randomScalingFactor(), 
      ], 
      backgroundColor: [ 
       "#F7464A", 
       "#46BFBD", 
       "#FDB45C", 
       "#949FB1", 
       "#4D5360", 
      ], 
      label: 'Dataset 1' 
     }, { 
      hidden: true, 
      data: [ 
       randomScalingFactor(), 
       randomScalingFactor(), 
       randomScalingFactor(), 
       randomScalingFactor(), 
       randomScalingFactor(), 
      ], 
      backgroundColor: [ 
       "#F7464A", 
       "#46BFBD", 
       "#FDB45C", 
       "#949FB1", 
       "#4D5360", 
      ], 
      label: 'Dataset 2' 
     }, { 
      data: [ 
       randomScalingFactor(), 
       randomScalingFactor(), 
       randomScalingFactor(), 
       randomScalingFactor(), 
       randomScalingFactor(), 
      ], 
      backgroundColor: [ 
       "#F7464A", 
       "#46BFBD", 
       "#FDB45C", 
       "#949FB1", 
       "#4D5360", 
      ], 
      label: 'Dataset 3' 
     }], 
     labels: [ 
      "Red", 
      "Green", 
      "Yellow", 
      "Grey", 
      "Dark Grey" 
     ] 
    }, 
    options: { 
     responsive: true, 
     legend: { 
      position: 'top', 
     }, 
     title: { 
      display: true, 
      text: 'Chart.js Doughnut Chart' 
     }, 
     animation: { 
      animateScale: true, 
      animateRotate: true 
     } 
    } 
}; 


showGraphs.prototype.myAllGraphs = function() { 

    //graph1 
    var myGraph1 = new Chart(ctx1, { 
    type: 'bar', 
    data: data1 
    }); 

    //graph2 
    var myDoughnut = new Chart(ctx, config); 

} 

return showGraphs; 


})(); 

var graphs = new showGraphs(); 
$("#testButton").on("click",graphs.myAllGraphs); 

は、ここでは、コードの組織に何か問題がある場合は私に教えてくださいFIDDLE

です。

Answer 1

1-私は別のファイルにデータを抽出します。これは、このファイルに混乱を削除し、他の場所で

2 - 2つのボタン用として再利用することができ、あなたはちょうどあなたがすなわちを示すべきでグラフを定義するには、パラメータを取るshowGraphs持つことができる：

$("#testButton").on("click", graphs.myAllGraphs.bind(null, 1)); 

    showGraphs.prototype.myAllGraphs = function (graphNumber) { 

    switch(graphNumber) { 
     case 1: 
     var myGraph1 = new Chart(ctx1, { 
      type: 'bar', 
      data: data1 
     }); 
     break; 
     case 2: 
     var myDoughnut = new Chart(ctx, config); 
     break; 
     default: 
     var myGraph1 = new Chart(ctx1, { 
      type: 'bar', 
      data: data1 
     }); 
     break; 

    } 

}