javascript - 谷歌 API : Google Chart Gauge Animation not working with Ajax Call

Question

setInterval(function () {
    drawGuage();
}, 5000);

   var chart1 = null;
  function drawGuage() {

        $.ajax({
            type: "POST",
            url: "Default.aspx/GetGuageData",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                var data;

                var options = {
                            title: 'Run-rate',
                            width: 500, height: 500,
                            min: 0, max: 120,
                            redFrom: 0, redTo: 80,
                            yellowFrom: 101, yellowTo: 120,
                            greenFrom: 81, greenTo: 100,
                            minorTicks: 5,
                            majorTicks: ['0', '30', '60', '90', '120'],
                            animation: {
                                duration: 1000,
                                easing: 'inAndOut'
                            },
                        };
                if (chart1 === null) {
                    chart1 = new google.visualization.Gauge($("#guageChart")[0]);
                     data = google.visualization.arrayToDataTable([
                        ['Label', 'Value'],
                        ['Production', 0]
                    ]);
                    chart1.draw(data, options);
                    google.visualization.events.addOneTimeListener(chart1, 'ready', function () {
                              data = google.visualization.arrayToDataTable(r.d);
                              chart1.draw(data, options);
                            });
                }
                else {
                    data = google.visualization.arrayToDataTable(r.d); 
                }
                chart1.draw(data, options);
            },
            failure: function (r) {
                alert(r.d);
            },
            error: function (r) {
                alert(r.d);
            }
        });
}

以上是我的 Google Gauge 图表代码。动画不工作。它总是固定为一个值。量规针在间隔设置上不移动。刷新数据时，仪表线不是动画的，而是从新绘制的。我想看炫酷的动画

Answer 1

看起来你正在用数据绘制图表，
在 'ready' 事件有时间使用react之前。

将最后一个 draw 语句移到 if 语句中，请参阅下面的注释...

            if (chart1 === null) {
                chart1 = new google.visualization.Gauge($("#guageChart")[0]);
                 data = google.visualization.arrayToDataTable([
                    ['Label', 'Value'],
                    ['Production', 0]
                ]);
                chart1.draw(data, options);
                google.visualization.events.addOneTimeListener(chart1, 'ready', function () {
                          data = google.visualization.arrayToDataTable(r.d);
                          chart1.draw(data, options);
                        });
            }
            else {
                data = google.visualization.arrayToDataTable(r.d); 
            }
            chart1.draw(data, options);  // <-- move this up one line

---

            if (chart1 === null) {
                chart1 = new google.visualization.Gauge($("#guageChart")[0]);
                 data = google.visualization.arrayToDataTable([
                    ['Label', 'Value'],
                    ['Production', 0]
                ]);
                chart1.draw(data, options);
                google.visualization.events.addOneTimeListener(chart1, 'ready', function () {
                          data = google.visualization.arrayToDataTable(r.d);
                          chart1.draw(data, options);
                        });
            }
            else {
                data = google.visualization.arrayToDataTable(r.d); 
                chart1.draw(data, options);  // <-- to here
            }