Question

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

a）视频
我。子类别：Netflix，YouTube，Vimeo，Vine，位DailyMotion
b）电子邮件＆amp;消息
我。子类别：gmail，hotmail， yahoomail
。。

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

或者还有其他方法可以让我知道吗？

Answer 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>

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

1 个答案: