1

Google ビジュアライゼーションの円グラフに取り組んでおり、個々のスライスを別のページにリンクさせたいと考えています。これと非常によく似た別の質問があることは知っていますが、答えがわかりません。私は HTML と CSS を少し使ったことがありますが、JavaScript でやったのはこれが初めてで、間違いなく迷っています。ユーザーがグラフのスライスをクリックして、新しいページに移動できるようにしたいと考えています。可能であれば、ページはグラフのスライスごとに異なる必要があります。ありがとうございました！これが私のコードです：

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

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
            ['Field', 'Number of Proposals'],
            ['Sustainability', 242],
            ['Education', 699],
            ['Information Technology', 240],
            ['Health & Wellness', 247],
            ['Community Development', 353],
            ['Public Policy', 138],
            ['Equity', 276],
            ['Food & Water', 131],
            ['Energy', 84],
            ['Security (Cyber & Other)', 56],
        ]);

        var options = {'width': 1200,
                       'height': 700,
            colors: ['#8C1D40', '#FFC627', '#6F6F6F', '#935669', '#FFDA74', '#919191', '#96757F', '#FEE9B0', '#BBBBBB', '#DEDEDE']
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
        google.visualization.events.addListener (chart, 'select', function(){
            var selection = chart.getSelection();
    console.log(selection);
        });
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>
4

1 に答える 1