Animuj wykres Google z JSON - javascript, jquery, json, google-visualisation

Wszystkie przykłady animacji nie pokrywają się, jeśli wykres jest tworzony przez dane JSON, wszystkie używają danych statycznych. Animacja przejścia.)

To jest mój kod, który pobiera moje dane przez 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>

Mam przycisk, który z powodzeniem przerysowuje wykres. Jednak nie ma animacji. Jak mogę uczynić wykres animowany? Dziękuję za pomoc.

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

Odpowiedzi:

Jak się wymknęło @FelipeFonseca, za każdym razem zastępujesz wykres #myBtn is clicked. Spróbuj zamiast tego:

(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);

Może powodujesz, że za każdym razem tworzysz wykres?

Spróbuj zrobić chart zmienną globalną i spróbuj ponownie