如何在 google 图表堆叠列中添加链接

Question

我在 Google 图表上玩了很久 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

如何为每个数据添加 link 可点击？

Answer 1

下面URL会帮助您在图表上添加link或点击事件。

https://developers.google.com/chart/interactive/docs/events?csw=1

Answer 2

解决方案

处理点击和 link 重定向

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

如何在 google 图表堆叠列中添加链接

How to add links in google chart stacked column

javascript

google-visualization

column-chart