0

今日、私はグーグルによるこれらのチャートサービスを見つけました、そして私は少し答えをいじって行き詰まり、チャート遷移アニメーションを試してみました。同じテーブルで2セットの異なるデータを表示します。ボタンをクリックすると変化します。以下はコードです。

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <button type="button" id="b1">Click Me!</button> 
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <title>
  Google Visualization API Sample
  </title>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">
  google.load('visualization', '1', {packages: ['corechart']});
  </script>
  <script type="text/javascript">
  // Some raw data (not necessarily accurate)
var rowData1 = [['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua  Guinea',
                 'Rwanda', 'Average'],
                ['2004/05', 165, 938, 522, 998, 450, 114.6],
                ['2005/06', 135, 1120, 599, 1268, 288, 382],
                ['2006/07', 157, 1167, 587, 807, 397, 623],
                ['2007/08', 139, 1110, 615, 968, 215, 409.4],
                ['2008/09', 136, 691, 629, 1026, 366, 569.6]];
var rowData2 = [['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua  Guinea',
                 'Rwanda', 'Average'],
                ['2004/05', 122, 638, 722, 998, 450, 614.6],
                ['2005/06', 100, 1120, 899, 1268, 288, 682],
                ['2006/07', 183, 167, 487, 207, 397, 623],
                ['2007/08', 200, 510, 315, 1068, 215, 609.4],
                ['2008/09', 123, 491, 829, 826, 366, 569.6]];

// Create and populate the data tables.
var data = [];
data[0] = google.visualization.arrayToDataTable(rowData1);
data[1] = google.visualization.arrayToDataTable(rowData2);

var options = {
  width: 400,
  height: 240,
  vAxis: {title: "Cups"},
  hAxis: {title: "Month"},
  seriesType: "bars",
  series: {5: {type: "line"}},
  animation:{
    duration: 1000,
    easing: 'out'
  },
};
var current = 0;
// Create and draw the visualization.
var chart = new google.visualization.ComboChart(document.getElementById('visualization'));
var button = document.getElementById('b1');
function drawChart() {
  // Disabling the button while the chart is drawing.
  button.disabled = true;
  google.visualization.events.addListener(chart, 'ready',
      function() {
        button.disabled = false;
        button.value = 'Switch to ' + (current ? 'Tea' : 'Coffee');
      });
  options['title'] = 'Monthly ' + (current ? 'Coffee' : 'Tea') + ' Production by Country';

  chart.draw(data[current], options);
}
drawChart();

button.onclick = function() {
  current = 1 - current;
  drawChart();
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>

ここhttps://developers.google.com/chart/interactive/docs/animation?hl=nl-NL、お願いします、これは初心者の質問ですが、これは私にはうまくいかないようです... i参照とすべてを追加しましたが、それでも何も得られませんでした。このコードをhtmlで修正して機能させるか、その方法に関する情報を提供してください。ありがとうございます:)ありがとうございます。:)

4

1 に答える 1

0

心配はいりません、私は答えを見つけました、これは非常に明白な答えでなければならないことを私は知っています、しかしこれは助けを必要とするかもしれない誰かのためです:)

    <html>
      <head>
     <button type="button" id="b1" onclick="init();" >Click me!</button>  
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">
        google.load("visualization", "1", {packages:["corechart"]});
        google.setOnLoadCallback(init);
        function init(){
              var rowData1 = [['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua  Guinea',
                         'Rwanda', 'Average'],
                        ['2004/05', 165, 938, 522, 998, 450, 114.6],
                        ['2005/06', 135, 1120, 599, 1268, 288, 382],
                        ['2006/07', 157, 1167, 587, 807, 397, 623],
                        ['2007/08', 139, 1110, 615, 968, 215, 409.4],
                        ['2008/09', 136, 691, 629, 1026, 366, 569.6]];
            var rowData2 = [['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua  Guinea',
                             'Rwanda', 'Average'],
                            ['2004/05', 122, 638, 722, 998, 450, 614.6],
                            ['2005/06', 100, 1120, 899, 1268, 288, 682],
                            ['2006/07', 183, 167, 487, 207, 397, 623],
                            ['2007/08', 200, 510, 315, 1068, 215, 609.4],
                            ['2008/09', 123, 491, 829, 826, 366, 569.6]];

            // Create and populate the data tables.
            var data = [];
            data[0] = google.visualization.arrayToDataTable(rowData1);
            data[1] = google.visualization.arrayToDataTable(rowData2);

            var options = {
              width: 400,
              height: 240,
              vAxis: {title: "Cups"},
              hAxis: {title: "Month"},
              seriesType: "bars",
              series: {5: {type: "line"}},
              animation:{
                duration: 1000,
                easing: 'out'
              },
            };
            var current = 0;
            // Create and draw the visualization.
            var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
            var button = document.getElementById('b1');
            function drawChart() {
              // Disabling the button while the chart is drawing.
              button.disabled = true;
              google.visualization.events.addListener(chart, 'ready',
                  function() {
                    button.disabled = false;
                    button.value = 'Switch to ' + (current ? 'Tea' : 'Coffee');
                  });
              options['title'] = 'Monthly ' + (current ? 'Coffee' : 'Tea') + ' Production by Country';

              chart.draw(data[current], options);
            }
            drawChart();

            button.onclick = function() {
              current = 1 - current;
              drawChart();
            }
        }
        </script>
      </head>
      <body>
        <div id="chart_div" style="width: 900px; height: 500px;"></div>
      </body>
    </html>
于 2012-08-31T10:47:56.437 に答える