3

私はGoogleチャートを使用していますが、アニメーションでそれが必要です..そしてアニメーションが機能しないのは私のコードです

google.load('visualization', '1', {
    packages: ['corechart']
});
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Yıl', 'Toplam Satış Miktarı (Ton)'],
        ['2007', 153888],
        ['2008', 37634],
        ['2009', 21835],
        ['2010', 80929],
        ['2011', 137699],
        ['2012', 313837],
        ['2013', 1050000], ]);

    var options = {
        title: 'Ciro',
        'width': 850,
        animation: {
            duration: 1000,
            easing: 'out'
        },
        'height': 400,
        hAxis: {
            title: 'Yıl',
            titleTextStyle: {
                color: 'red'
            }
        }
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}
4

6 に答える 6

3

Googleチャートを初めて描画するときにアニメーションが必要だと思います。Google チャートは、値を変更している場合にのみ、アニメーションを適切にサポートします。次のことを試してください。

     var data = google.visualization.arrayToDataTable([
          ['Yıl', 'Toplam Satış Miktarı (Ton)'],
          ['2007', 153888],
          ['2008', 37634],
          ['2009', 21835],
          ['2010', 80929],
          ['2011', 137699],
          ['2012', 313837],
          ['2013', 1050000], ]);

      var options = {
          title: 'Ciro',
          'width': 850,
          animation: {
              duration: 1000,
              easing: 'out'
          },
          'height': 400,
          hAxis: {
              title: 'Yıl',
              titleTextStyle: {
                  color: 'red'
              }
          },
          vAxis: {minValue:0, maxValue:1200000}
      };

      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      var data1 = google.visualization.arrayToDataTable([
          ['Yıl', 'Toplam Satış Miktarı (Ton)'],
          ['2007', 0],
          ['2008', 0],
          ['2009', 0],
          ['2010', 0],
          ['2011', 0],
          ['2012', 0],
          ['2013', 0], ]);
      chart.draw(data1, options);
      chart.draw(data, options);

コードをもう少し読みやすく変更できますが、私は明示的にしようとしていました。

于 2013-07-18T14:23:13.820 に答える
1

Google チャートでアニメーションを行うには、以下のコードを参照してください。

        var index = 0;
        var chartData =[153888,37634,21835,80929,137699,313837,1050000];
        var drawChart = function() {
            console.log('drawChart index ' + index);
            if (index < chartData.length) {
                data.setValue(index, 1, chartData[index++]);
                chart.draw(data, options);
            }
        }

        google.visualization.events.addListener(chart, 'animationfinish', drawChart);

実際のサンプルについては、 jqfaq.comをご覧ください。これがあなたを助けることを願っています。

于 2013-07-22T08:01:31.687 に答える
0

ゲージチャートでも同様の問題がありました。私の場合は、非同期でデータをロードし、チャートのラベルと値の両方を同時に更新したことが原因でした。別々にやったらうまくいきました。

したがって、これの代わりに：

iVeChartData.setValue(0, 1, myValue); //Update value
iVeChartData.setValue(0, 0, myLabel); //Update label from "Loading.." to something else
window.iVeChart.draw(iVeChartData, iVeChartOptions); //Update chart

これは私がしました：

iVeChartData.setValue(0, 0, myLabel); //Update label from "Loading.." to something else
window.iVeChart.draw(iVeChartData, iVeChartOptions); //Update chart
iVeChartData.setValue(0, 1, myValue); //Update value
window.iVeChart.draw(iVeChartData, iVeChartOptions); //Update chart
于 2019-11-21T09:42:45.007 に答える