使用谷歌可视化为子类别绘制单独的条形图答案

【问题标题】：Draw separate barchart for subcategories using google visualization使用谷歌可视化为子类别绘制单独的条形图
【发布时间】：2014-11-01 20:15:47
【问题描述】：

我正在尝试使用谷歌可视化绘制条形图。我有 11 个类别，在这 11 个类别中，有 4 个有子类别。不同类别的子类别不同。例如：

a) 视频
i.子类别：Netflix、YouTube、Vimeo、Vine、每日运动
b) 电子邮件和消息传递
i.子类别: gmail, hotmail, 雅虎邮箱
。 . .

我的要求是，当单击条形图上的一个类别时，子类别将显示为另一个条形图。这可以使用谷歌可视化吗？请告诉我。

或者有没有其他方法可以解决这个问题？

【问题讨论】：

是的，这当然可以使用谷歌可视化，谷歌图表有一个选择事件监听器。您想用您的子类别替换图表还是只在下方/旁边显示另一个？
感谢 Juvian 的回复。除此之外，我还想展示另一个。如果你有例子，你能把它贴在这里吗？

标签： google-visualization

【解决方案1】：

这是一个非常简单的示例，说明您可以做什么：

      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Category', 'Value'],
          ['Videos',  1000],
          ['Mail',  1170]
        ]);

        
        var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
          
          google.visualization.events.addListener(chart, 'select', function(){
              var selection=chart.getSelection();
              if(selection.length == 1){
                  var row = selection[0].row;
                  var col = selection[0].column;
                  var cat = data.getValue(row,0);
                  drawSubChart(cat);
              }
          })
          chart.draw(data, {});
      }

function drawSubChart(cat){
    var arr = [['SubCategory', 'Value']];
    if(cat == 'Videos'){
        arr.push(['Youtube', 700], ['DailyMotion', 300]);
    }else if(cat == 'Mail'){
        arr.push(['Gmail', 600], ['Hotmail', 570]);
    }
    
    var data = google.visualization.arrayToDataTable(arr);
    
    var chart = new google.visualization.BarChart(document.getElementById('chart_div2'));   
    chart.draw(data, {});
}

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
  <div id="chart_div" style="width: 500px; height: 300px;"></div>
<div id="chart_div2" style="width: 500px; height: 300px;"></div>

【讨论】：

非常感谢 Juvian，这正是我想要的。你真的很摇滚！
没问题，欢迎进一步询问