3

グラフがJSONデータで作成されている場合、アニメーション化の方法に関するすべての例はカバーしていません。それらはすべて静的データを使用します。（トランジションアニメーションを参照してください。）

これは、JSONを介してデータを取得する私のコードです。

<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);

    function drawChart() {
        $.post('/Weight/WeightAreaChartData', {}, function (data) {
            var tdata = new google.visualization.arrayToDataTable(data);
            var options = {
                title: 'Weight Lost & Gained This Month',
                hAxis: { title: 'Day of Month', titleTextStyle: { color: '#1E4A08'} },
                vAxis: { title: 'Lbs.', titleTextStyle: { color: '#1E4A08' } },
                chartArea: { left: 50, top: 30, width: "75%" },
                colors: ['#FF8100'],
                animation:{
                    duration: 1000,
                    easing: 'in'
                },
            };

            var chart = new google.visualization.AreaChart(
                document.getElementById('chart_div')
            );

            chart.draw(tdata, options);
        });
    }
</script>

チャートを正常に再描画するボタンがあります。ただし、アニメーション化されません。チャートをアニメートするにはどうすればよいですか？ご協力ありがとうございました。

 $('#myBtn').click(function () {
      drawChart();
 });
4

2 に答える 2

5

たぶん、あなたは毎回チャートを作成しているのでしょうか？

chartグローバル変数を作成して再試行してください

于 2013-01-03T22:18:47.543 に答える
4

@FelipeFonsecaによってとらえられていないように、毎回チャートを上書きしています#myBtn is clicked。代わりにこれを試してください：

(function (global, undef) {
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);

    var options = {
        title: 'Weight Lost & Gained This Month',
        hAxis: { title: 'Day of Month', titleTextStyle: { color: '#1E4A08'} },
        vAxis: { title: 'Lbs.', titleTextStyle: { color: '#1E4A08' } },
        chartArea: { left: 50, top: 30, width: "75%" },
        colors: ['#FF8100'],
        animation:{
            duration: 1000,
            easing: 'in'
        }
    };

    var chart;
    function drawChart() {
        $.post('/Weight/WeightAreaChartData', {}, function (data) {
            var tdata = new google.visualization.arrayToDataTable(data);

            if (!chart) {
                chart = new google.visualization.AreaChart(
                    document.getElementById('chart_div')
                );
            }

            chart.draw(tdata, options);
        });
    }

})(this);
于 2013-01-04T05:41:31.433 に答える