Jak renderować tekst na wykresie pierścieniowym, używam ChartJs .
javascript
chart.js
shashisp
źródło
źródło
Żadna z pozostałych odpowiedzi nie zmienia rozmiaru tekstu na podstawie ilości tekstu i rozmiaru pączka. Oto mały skrypt, którego możesz użyć do dynamicznego umieszczenia dowolnej ilości tekstu pośrodku i automatycznie zmieni jego rozmiar.
Przykład: http://jsfiddle.net/kdvuxbtj/
Zajmie to dowolną ilość tekstu w pączku o rozmiarze idealnym do pączka. Aby uniknąć dotykania krawędzi, możesz ustawić wypełnienie boczne jako procent średnicy wewnętrznej strony koła. Jeśli go nie ustawisz, domyślnie będzie to 20. Ty także kolor, czcionka i tekst. Wtyczka zajmie się resztą.
Kod wtyczki będzie zaczynał się od podstawowego rozmiaru czcionki 30 pikseli. Stamtąd sprawdzi szerokość tekstu i porówna go z promieniem koła i zmieni jego rozmiar na podstawie stosunku szerokości koła do tekstu.
Ma domyślny minimalny rozmiar czcionki 20 pikseli. Jeśli tekst przekroczyłby granice przy minimalnym rozmiarze czcionki, tekst zostanie zawinięty. Domyślna wysokość linii podczas zawijania tekstu to 25 pikseli, ale można ją zmienić. Jeśli ustawisz domyślny minimalny rozmiar czcionki na false, tekst stanie się nieskończenie mały i nie będzie zawijany.
Ma również domyślny maksymalny rozmiar czcionki 75 pikseli na wypadek, gdyby nie było wystarczającej ilości tekstu, a napis byłby zbyt duży.
To jest kod wtyczki
W obiekcie wykresu używasz następujących opcji
Podziękowania dla @Jenna Sloan za pomoc w matematyce zastosowanej w tym rozwiązaniu.
źródło
Tutaj jest uporządkowany i połączony przykład powyższych rozwiązań - responsywny (spróbuj zmienić rozmiar okna), obsługuje samoregulację animacji, obsługuje podpowiedzi
https://jsfiddle.net/cmyker/u6rr5moq/
AKTUALIZACJA 17.06.16:
Ta sama funkcjonalność, ale dla chart.js w wersji 2:
https://jsfiddle.net/cmyker/ooxdL2vj/
źródło
Uncaught TypeError: Cannot read property 'extend' of undefined
jakieś pomysły?Unikałbym modyfikowania kodu chart.js, aby to osiągnąć, ponieważ jest to dość łatwe w przypadku zwykłego CSS i HTML. Oto moje rozwiązanie:
HTML:
CSS:
Wynik wygląda następująco:
źródło
To też działa na mój koniec ...
źródło
Opieraj się na odpowiedzi @ rap-2-h, tutaj kod do używania tekstu na wykresie pierścieniowym na Chart.js do użycia w desce rozdzielczej. Ma dynamiczny rozmiar czcionki dla opcji responsywnej.
HTML:
Scenariusz:
Tutaj przykładowy kod. Spróbuj zmienić rozmiar okna. http://jsbin.com/wapono/13/edit
źródło
Możesz użyć CSS z pozycjonowaniem względnym / bezwzględnym, jeśli chcesz, aby był responsywny. Ponadto może z łatwością obsługiwać wiele linii.
https://jsfiddle.net/mgyp0jkk/
źródło
Jest to oparte na aktualizacji Cmykera dla Chart.js 2. (opublikowanej jako kolejna odpowiedź, ponieważ nie mogę jeszcze komentować)
Miałem problem z wyrównaniem tekstu w przeglądarce Chrome, gdy legenda jest wyświetlana, ponieważ wysokość wykresu nie obejmuje tego, więc nie jest prawidłowo wyrównana na środku. Naprawiono to, biorąc to pod uwagę przy obliczaniu fontSize i textY.
Obliczyłem procent wewnątrz metody, a nie ustaloną wartość, ponieważ mam ich wiele na stronie. Założenia są takie, że twój wykres ma tylko 2 wartości (w przeciwnym razie jaki jest procent? I że pierwsza jest tą, dla której chcesz wyświetlić procent. Mam też kilka innych wykresów, więc sprawdzam typ = pączek. Używam pączków tylko do wyświetlania procentów, więc to działa dla mnie.
Kolor tekstu wydaje się nieco chybiony, w zależności od kolejności, w jakiej działają itp., Więc napotkałem problem podczas zmiany rozmiaru, że tekst zmieniał kolor (między czarnym a podstawowym w jednym przypadku i drugorzędnym i białym w innym), więc „Zapisuję” bez względu na istniejący styl wypełnienia, rysuję tekst (w kolorze danych podstawowych), a następnie przywracam stary styl wypełnienia. (Zachowanie starego stylu wypełnienia nie wydaje się potrzebne, ale nigdy nie wiadomo).
https://jsfiddle.net/g733tj8h/
Pokaż fragment kodu
źródło
Możesz również wkleić kod mayankcpdixit w
onAnimationComplete
opcji:Tekst zostanie wyświetlony po animacji
źródło
save
metodyTworzę demo z 7 suwakami jQueryUI i ChartJs (z dynamicznym tekstem w środku)
DEMO W JSFIDDLE
źródło
Odpowiedź @ rap-2-h i @Ztuons Ch nie pozwala na
showTooltips
aktywowanie tej opcji, ale możesz utworzyć icanvas
umieścić drugi obiekt za tym, który renderuje wykres.Ważną częścią jest stylizacja wymagana w elementach div i samym obiekcie kanwy, tak aby renderowały się jeden na drugim.
Oto jsfiddle: https://jsfiddle.net/68vxqyak/1/
źródło
@Cmyker, świetne rozwiązanie dla chart.js v2
Jedno małe ulepszenie: warto sprawdzić odpowiedni identyfikator kanwy, zobacz zmodyfikowany fragment poniżej. W przeciwnym razie tekst (np. 75%) jest również renderowany w środku innych typów wykresów na stronie.
Ponieważ legenda (patrz: http://www.chartjs.org/docs/latest/configuration/legend.html ) powiększa wysokość wykresu, wartość wysokości należy uzyskać na podstawie promienia.
źródło
Przede wszystkim chwała za wybór Chart.js! Używam go w jednym z moich obecnych projektów i absolutnie go kocham - doskonale spełnia swoje zadanie.
Chociaż etykiety / podpowiedzi nie są jeszcze częścią biblioteki, możesz rzucić okiem na te trzy żądania ściągnięcia:
I, jak Cracker0dks wspomniano, Chart.js zastosowań
canvas
do renderowania, więc równie dobrze możesz po prostu zaimplementować własne podpowiedzi z nimi bezpośrednio w interakcję.Mam nadzieję że to pomoże.
źródło
Rozwiązanie Alesany ogólnie działa bardzo dobrze dla mnie, ale podobnie jak inne chciałem móc określić, gdzie występują przerwy w linii. Wprowadziłem kilka prostych modyfikacji, aby zawijać wiersze po znakach „\ n”, o ile tekst jest już zawijany. Bardziej kompletne rozwiązanie wymusiłoby zawijanie, gdyby w tekście były jakieś znaki „\ n”, ale w tej chwili nie mam czasu, aby to zadziałało z rozmiarami czcionek. Podczas owijania zmiana powoduje również nieco lepsze wyśrodkowanie w poziomie (pozwala uniknąć końcowych spacji). Kod poniżej (nie mogę jeszcze dodawać komentarzy).
Fajnie by było, gdyby ktoś umieścił tę wtyczkę na GitHubie ...
źródło