0

私は Google Visualization Charts API を初めて使用します。ドロップダウンの選択に基づいてさまざまなグラフを表示しようとしています。別の描画関数を追加すると、グラフが表示されません。私が試した以下のフィドルを見つけてください。

http://jsfiddle.net/meetravi/PFa5h/5/

JS コード:

   $(document).ready(function(){
   var selectedVal = "";
   $('#dashboard-chart-type').change(function(){
     selectedVal = $(this).val();
     alert(selectedVal);
     switch(selectedVal) {

      case "average":
          $('#visualization').empty();
          init();
          break;
      case "total_install":
          debugger;
          $('#visualization').empty();
          init();
          break;
      case "total_uninstall":
          debugger;
          $('#visualization').empty();
          init();
          break;
      default:
          $('#visualization').empty();
          init();
          break;
  }
});

if(selectedVal==""){
    init();
}

 });
4

1 に答える 1

0

長い闘争の後、選択に基づいて複数のチャートが機能するようになりました。問題は、コールバックを介して描画視覚化関数を呼び出す必要がある複数のチャートをロードすることでした。Google グループからこの有用な情報を見つけました。

init()次に、さまざまなチャートをロードするためにinit2()...などの関数を追加しました。ここで注意する必要があるのは、メソッドdrawvisualisation()内で呼び出すことです。これは、 google.setOnLoadCallback(drawVisualization());を使用してのみ呼び出す必要があります。代わりに google.setOnLoadCallback(drawVisualization);を呼び出します。Google Playgroundの例で述べたように。init()

 function init(){
     google.setOnLoadCallback(drawVisualization());
 }
 function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Austria', 'Bulgaria', 'Denmark', 'Greece'],
    ['2003',  1336060,    400361,    1001582,   997974],
    ['2004',  1538156,    366849,    1119450,   941795],
    ['2005',  1576579,    440514,    993360,    930593],
    ['2006',  1600652,    434552,    1004163,   897127],
    ['2007',  1968113,    393032,    979198,    1080887],
    ['2008',  1901067,    517206,    916965,    1056036]
]);

// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('visualization')).
    draw(data,
    {title:"Yearly Coffee Consumption by Country",
        width:600, height:400,
        vAxis: {title: "Year"},
        hAxis: {title: "Cups"}}
);
}

表示しないことでグラフを台無しにしていたコードgoogle.setOnLoadCallback(drawVisualization)を使用しようとしたときに、呼び出しが行われませんでした。

これは、選択に基づいて機能する私のフィドルです。 http://jsfiddle.net/meetravi/PFa5h/6/

ここで、上記のフィドルで、折れ線、列、積み上げなどのさまざまなタイプのチャートをロードするために作成しました...

于 2012-10-25T14:31:37.913 に答える