Utworzyłem podstawowy wykres słupkowy za pomocą chartjs i działa dobrze. Teraz chcę zaktualizować wartości w przedziale czasowym. Mój problem polega na tym, że po utworzeniu wykresu nie wiem jak poprawnie zaktualizować jego wartości ...
Mój kod:
var ctx = $("#myChart").get(0).getContext("2d");
var dts = [
{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
data: [0, 0, 0, 0, 0]
}
];
var data = {
labels: ["Core#1", "Core#2", "Core#3", "Core#4", "Total"],
datasets: dts
};
var chart = new Chart(ctx);
chart.Bar(data);
//test code
setInterval( function () {
data.datasets[0].data = [random(), random(), random(), random(), random()];
chart.Bar(data);
},2000);
w kodzie testu aktualizuję wartości datasets[0].data
- czy to jest właściwy sposób? Problem polega na tym, że za każdym razem, gdy dzwonię chart.Bar()
, wartości są resetowane do 0, a następnie animowane do wartości losowej (tak jak odtwarzam wykres). W ten sposób wszystkie animacje są zawsze od 0 do wartości, co wygląda dziwnie. Spodziewałbym się, że jeśli zaktualizuję wartość z 50 na 10, słupek spadnie do 10 z 50 i nie zostanie ustawiony na 0, a następnie animowany na 10.
Nie znalazłem nic w dokumentach na ten temat ... czy robię coś złego czy to jest niemożliwe z tą biblioteką?
źródło
Odpowiedzi:
Aktualizacja: Wygląda na to, że chartjs został zaktualizowany (patrz komentarz poniżej). Jest kilka przykładów, które wyglądają bardzo ładnie:
Oryginalny post
Od listopada 2013 r. Wydaje się, że jest bardzo mało opcji aktualizowania wykresów.
Jest tutaj dobry przykład (powielony poniżej) dodawania nowych punktów do wykresu liniowego. Wciąż trochę nerwowo, ale nieźle. Myślę jednak, że efekt prawdopodobnie zależy od używanego wykresu.
Wygląda na to, że jest to gdzieś w fazie rozwoju. Nie widzę jeszcze żadnej daty premiery: https://github.com/nnnick/Chart.js/issues/13 [Zamknięte 26 lipca 2014 r.]
JS
HTML
źródło
update()
Wyzwala aktualizację wykresu. chart.update ()update()
można bezpiecznie wywołać po zaktualizowaniu wartości jednego lub większej liczby istniejących punktów w obiekcie danych, renderując zmiany w jednej animowanej pętli renderowania.źródło
Oto jak to zrobić w ostatniej wersji ChartJs:
Spójrz na ten wyraźny film
lub przetestuj go w jsfiddle
źródło
chart.update()
animuje od poprzedniego położenia punktów, tak jak chciał PO.Możesz także użyć funkcji zniszcz (). Lubię to
źródło
Wystarczy zmienić
chartObject.data.datasets
wartość i wywołać wupdate()
ten sposób:źródło
Usuń kanwę dom i dodaj ponownie.
źródło
Myślę, że najłatwiejszym sposobem jest napisanie funkcji aktualizującej wykres, w tym
chart.update()
metody. Sprawdź ten prosty przykład, który napisałem w jsfiddle dla wykresu słupkowego.Mam nadzieję że to pomoże.
źródło
Myślę, że nie jest to teraz możliwe.
Jest to jednak funkcja, która powinna pojawić się wkrótce, jak zasugerował autor tutaj: https://github.com/nnnick/Chart.js/issues/161#issuecomment-20487775
źródło
Jeśli niszczenie () i czyszczenie () nie działają (tak jak miałem doświadczenie), możesz użyć jquery, aby usunąć płótno i dołączyć je ponownie.
źródło
Najprostszym sposobem jest zastąpienie elementu canvas, a następnie ponowne wywołanie funkcji new Chart ():
Oczywiście musisz zamienić yourChartData, yourChartType i yourChartOptions na prawidłowe wartości wymagane do zainicjowania Chart.js. Zobacz dokument Chart.js .
Możesz wywołać funkcję reloadMyChart jednym kliknięciem przycisku lub innym wydarzeniem, którego potrzebujesz. Prawdopodobnie dodasz parametry do tej funkcji i użyjesz ich do wywołania REST w celu dynamicznej aktualizacji wykresu, na przykład:
Mam nadzieję, że to pomoże! =)
źródło
Wyświetlanie wykresu aktualizacji w czasie rzeczywistym
pełny kod można pobrać w linku do opisu
źródło
Istnieją co najmniej 2 sposoby rozwiązania tego problemu:
1)
chart.update()
2) Usuń istniejący wykres za pomocą chart.destroy () i utwórz nowy obiekt wykresu.
źródło
Możesz sprawdzić instancję
Chart
za pomocąChart.instances
. To da ci wszystkie instancje wykresów. Teraz możesz iterować te instancje i zmieniać dane, które są obecne w config. załóżmy, że masz tylko jeden wykres na swojej stronie.źródło
To takie proste, wystarczy wymienić element kanwy wykresu.
źródło