Chciałbym zapytać, czy jest to możliwe przy użyciu Chart.js. wyświetlić wartości danych? Chcę wydrukować wykres.
Dzięki za każdą radę.
javascript
chart.js
FuSsA
źródło
źródło
Odpowiedzi:
Późna edycja: istnieje oficjalna wtyczka do Chart.js,
2.7.0+
aby to zrobić: https://github.com/chartjs/chartjs-plugin-datalabelsOryginalna odpowiedź:
Możesz przechodzić przez punkty / słupki onAnimationComplete i wyświetlać wartości
Zapowiedź
HTML
Scenariusz
Fiddle - http://jsfiddle.net/uh9vw0ao/
źródło
onComplete
tutaj wywołania zwrotnego, ale jest ono również uruchamiane, gdy najechanie kursorem myszy znajduje się na słupku wykresu, powodując migotanie numeru z powodu przerysowania. Czy to samo, jeślionAnimationComplete
? Nie mogę użyć tego wywołania zwrotnego z moim istniejącym kodem wykresu (patrzvar chartBar
na dole pastebin.com/tT7yTkGh )Oto zaktualizowana wersja Chart.js 2.3
23 września 2016: Zmodyfikowałem mój kod, aby działał z wersją 2.3 dla obu typów linii / słupków.
Ważne: Nawet jeśli nie potrzebujesz animacji, nie zmieniaj opcji czasu trwania na 0, w przeciwnym razie otrzymasz chartInstance.controller jest niezdefiniowanym błędem.
źródło
Ta opcja animacji działa w wersji 2.1.3 na wykresie słupkowym.
Nieznacznie zmodyfikowana odpowiedź @ Ross
źródło
hover: {animationDuration: 0}
aby zatrzymać.filter(dataset => !dataset._meta[0].hidden)
Myślę, że najładniejszą opcją do zrobienia tego w chartJS v2.x jest użycie wtyczki, więc nie masz dużego bloku kodu w opcjach. Ponadto zapobiega znikaniu danych po najechaniu kursorem na słupek.
To znaczy po prostu użyj tego kodu, który rejestruje wtyczkę, która dodaje tekst po narysowaniu wykresu.
źródło
Chart.defaults.global.tooltips.enabled = false;
. Problem z tym rozwiązaniem polega na tym, żeafterDraw
funkcja jest wywoływana setki razy, prawdopodobnie generując obciążenie procesora. Mimo wszystko jest to na razie jedyna odpowiedź bez mrugnięcia okiem. Jeśli potrzebujesz lepszego renderowaniahorizontalBar
wykresów, użyjctx.textAlign = 'left'; ctx.textBaseline = 'middle';
ictx.fillText(dataset.data[i], model.x+5, model.y);
.Opierając się na odpowiedzi @ Rossa dla Chart.js 2.0 i nowszych, musiałem wprowadzić niewielkie poprawki, aby zabezpieczyć się przed przypadkiem, gdy wysokość słupka jest zbyt wybrana do granicy skali.
animation
Atrybut opcji wykresie słupkowym za:źródło
ctx.save()
na koniec, ale to nie pomogłoonComplete
powrotem połączenie jest wykonywane, kiedy unosiła się na bar, który powoduje, że pojawi się przerysować & tekstowe do blink.Would być to samoonAnimationComplete
jak dobrze? Jestem w stanie używaćonAnimationComplete
plecy rozmowę z moim istniejącego kodu (patrzvar chartBar
na dole pastebin. com / tT7yTkGhJeśli używasz wtyczki chartjs-plugin-datalabels, pomocny będzie następujący obiekt opcji kodu
Upewnij się, że importujesz
import 'chartjs-plugin-datalabels';
w pliku maszynopisu lub dodajesz odniesienie do<script src="chartjs-plugin-datalabels.js"></script>
w pliku javascript.źródło
Po tej dobrej odpowiedzi użyłbym następujących opcji dla wykresu słupkowego:
To nadal wykorzystuje system podpowiedzi i jego zalety (automatyczne pozycjonowanie, szablony, ...), ale ukrywa dekoracje (kolor tła, daszek, ...)
źródło
this.datasets[0].points
zamiast.bars
. Wolę to rozwiązanie, ponieważ korzysta z systemu podpowiedzi.onComplete
wywołaniu zwrotnym animacji, ale jest ono uruchamiane nawet po najechaniu kursorem na słupki wykresu, co powoduje, że tekst przerysowuje się i daje niepożądany efekt mrugnięcia. Także próbowałemafterDraw
i wszystko jest takie samo. nie dzieje się na skrzypcach dostarczonych przez potatopeelings.Any Ideas plz?Z próbek chart.js (plik Chart.js-2.4.0 / samples / data_labelling.html):
`` `` // Zdefiniuj wtyczkę do dostarczania etykiet danych
`` ''
źródło
Polecam użycie tej wtyczki: https://github.com/chartjs/chartjs-plugin-datalabels
Etykiety można dodawać do wykresów po prostu importując wtyczkę do pliku js, np .:
Można je precyzyjnie dostroić, korzystając z tych dokumentów: https://chartjs-plugin-datalabels.netlify.com/options.html
źródło
Trochę zredagowano odpowiedź @ ajhuddy. Tylko dla wykresów słupkowych . Moja wersja dodaje:
Wada: po najechaniu kursorem na słupek, który ma wartość w środku, wartość może wyglądać na nieco poszarpaną. Nie znalazłem rozwiązania wyłączającego efekty najechania kursorem. Może również wymagać dostosowania w zależności od własnych ustawień.
Konfiguracja:
Pomocnicy:
źródło
calculateTickRotation
, wiersz 7075. , znajduje się w funkcji Scale. Przeanalizuję to.Z mojego doświadczenia wynika , że po dołączeniu wtyczki chartjs-plugin-datalabels (pamiętaj, aby umieścić
<script>
tag po tagu chart.js na stronie), wykresy zaczną wyświetlać wartości.Jeśli wybierzesz, możesz dostosować go do swoich potrzeb. Dostosowanie jest wyraźnie udokumentowane tutaj, ale zasadniczo format jest podobny do tego hipotetycznego przykładu:
źródło