Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/69.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 谷歌可视化API-基于选择的多个图表_Javascript_Jquery_Google Visualization - Fatal编程技术网

Javascript 谷歌可视化API-基于选择的多个图表

Javascript 谷歌可视化API-基于选择的多个图表,javascript,jquery,google-visualization,Javascript,Jquery,Google Visualization,我是谷歌可视化图表API的新手。我试图根据下拉选择显示不同的图表。如果我正在添加另一个绘图函数,则不会显示图表。请在下面找到我的小提琴,我已经试过了 JS代码: $(document).ready(function(){ var selectedVal = ""; $('#dashboard-chart-type').change(function(){ selectedVal = $(this).val(); alert(selectedVal);

我是谷歌可视化图表API的新手。我试图根据下拉选择显示不同的图表。如果我正在添加另一个绘图函数,则不会显示图表。请在下面找到我的小提琴,我已经试过了

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();
}

 });

经过长时间的努力,多个图表在选择的基础上工作。问题是要加载多个图表,您需要通过回调调用draw Visualization函数。我从谷歌群组中找到了这些有用的信息

然后我添加了一些函数来加载不同的图表。这里我们需要注意的一点是调用
drawVisualization()
inside
init()
方法,应该只使用google.setOnLoadCallback(drawVisualization())调用它而不是调用google.setOnLoadCallback(drawVisualization)如谷歌游乐场示例中所述

 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)时,调用没有发生,该代码没有显示,破坏了我的图形

这是我的小提琴,它是根据选择来工作的。

在上面的提琴中,我加载了不同类型的图表,如直线、柱、堆叠等