javascript - 如何在谷歌图表堆积列中添加链接

Question

我在这里的 Google 图表 Playground 中对 Google 图表进行了相当多的研究

这是显示下图的代码

<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart']});     
      </script>


      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            var data = google.visualization.arrayToDataTable([
        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
         'Western', 'Literature', { role: 'annotation' } ],
        ['2010', 10, 24, 20, 32, 18, 5, ''],
        ['2020', 16, 22, 23, 30, 16, 9, ''],
        ['2030', 28, 19, 29, 30, 12, 13, '']
      ]);

            var options = {
                            title: "h",
                            width: 600,

                            legend: { position: "none" },
                            isStacked:true
                        };

            var chart = new google.visualization.BarChart(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>

Chart Image

如何为每个数据添加可点击的链接？

Answer 1

解决方案

处理点击和链接重定向

<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart']});     
      </script>


      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            var data = google.visualization.arrayToDataTable([
        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
         'Western', 'Literature', { role: 'annotation' } ],
        ['2010', 10, 24, 20, 32, 18, 5, ''],
        ['2020', 16, 22, 23, 30, 16, 9, ''],
        ['2030', 28, 19, 29, 30, 12, 13, '']
      ]);

            var options = {
                            title: "h",
                            width: 600,

                            legend: { position: "none" },
                            isStacked:true
                        };

            var chart = new google.visualization.BarChart(document.getElementById('container'));
            chart.draw(data, options);
			google.visualization.events.addListener(chart, 'select', selectHandler);
			function selectHandler(e) {
				  var selection = chart.getSelection();
				  if (selection.length == true && selection[0].row != null) {
					console.log(selection[0])
					   //alert('You selected ' +data.getValue(selection[0].row, selection[0].column));
					   //window.open(data.getValue(selection[0].row, 0));
					    window.open('https://www.google.com/search?q='+data.getColumnLabel(selection[0].column)+':'+data.getValue(selection[0].row, selection[0].column));
				   } 
				}
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>