Как добавить ссылки в гистограмму сложенного столбца - PullRequest
Новая
       31

Как добавить ссылки в гистограмму сложенного столбца

1 голос
/ 14 октября 2019

Я немного поигрался с графиками Google на игровой площадке Google Charts здесь

Это код, который показывает изображение ниже 

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

ДиаграммаИзображение

Как добавить ссылку, кликабельную для каждой информации?

Ответы [ 2 ]

0 голосов
/ 14 октября 2019

Решение

Обработка Нажмите и ссылку Перенаправление 

<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>
0 голосов
/ 14 октября 2019

Ниже URL поможет вам добавить ссылку или событие клика на графике.

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

...