Wykres kołowy CSS
Przykład 01:
Zacznijmy od najbardziej podstawowego przykładu stylizacji HTML, aby stworzyć wykres kołowy na naszej stronie internetowej HTML. Ten przykład zaczyna się od podstawowych tagów HTML - HTML, głowy, stylu i ciała. Przed stylizowaniem strony HTML musimy rzucić okiem na wszystkie jej elementy za pomocą znacznika ciała. Korpus naszej strony HTML zawiera pojedynczy nagłówek największego rozmiaru, i.mi. H1. Nagłówek podąża za elementem „div”, aby utworzyć nową sekcję na naszej stronie. Element DIV jest określony w klasie „PiechartContainer” i jest zamknięty. Ciało tej strony HTML jest ukończone tutaj.
Teraz mamy głowę, która podąża za tagiem „tytuł”, aby nadać nazwę naszej stronie internetowej. W obrębie znacznika stylizacji CSS tego kodu używamy elementu „nadwozia” do stylizowania wszystkich jego elementów połączonych najpierw. Wszystkie ciała zawierają szary kolor tła. Teraz używamy klasy „PiechartContainer” z DOT (.) Postać, aby stworzyć wykres kołowy. Element DIV zawierający tę klasę ma najwyższy margines 30 pikseli, wyświetlacz bloku, położenie bezwzględne, szerokość i wysokość 500 pikseli oraz granica promienia 50 procent.
Oprócz tego używamy właściwości obrazu tła, aby utworzyć wykres kołowy z atrybutem „stożkowym gradientu”. Musimy podać różne wartości i kolory dla trzech stożkowych sekcji wykresu kołowego dla kierunków x, y i z. Całkowita wartość 3 sekcji stożkowych z trzema osiami - x, y i z - definiuje obszar dla każdej sekcji inaczej. Zamknijmy znacznik stylu, zapisz kod i uruchom ten kod w kodzie Visual Studio.
Wyjście tego kodu HTML pokazuje pojedynczy nagłówek i wykres kołowy wyświetlany na ekranie strony internetowej HTML. Wykres kołowy wyświetla w nim 3 sekcje stożkowe z różnymi kolorami i wartościami procentowymi.
Przykład 02:
Zacznijmy od kolejnego przykładu HTML, aby stworzyć wykres kołowy nowego stylu. Ten sam format HTML jest wykorzystywany w tym pliku. Rzucamy okiem na obszar ciała wraz z jego stylem dla każdego elementu z tagu stylu naszego kodu. Ogólny kolor tła nadwozia jest ustawiony na szarość za pośrednictwem właściwości „tła” używanej dla „.Element ciała ”. Korpus tej strony HTML zawiera pojedynczy nagłówek rozmiaru 1, a następnie stworzenie nowego pojemnika „Div” określonego przez identyfikator „My-Chart-Container”. Nagłówek nie ma stylizacji, podczas gdy ten kontener jest zgięte, a elementy są wyrównane do środka.
W tym głównym pojemniku tworzymy dwa inne kontenery za pomocą elementu „Div”. Pierwszy „Div” jest sklasyfikowany przez identyfikator „My-Pie-Chart”, a drugi „Div” jest klasyfikowany przez identyfikator „Container”. Pierwszy pojemnik „Div” z „My-Pie-Chart” służy do utworzenia wykresu kołowego w kształcie koła. W tym celu użyj klasy „My-Na-Kart” z właściwością „tła” w stylu tagu. Atrybut „stożkowy” jest przekazywany do właściwości tła o różnych kolorach i ich proporcjach w ciągu procentu, aby wyświetlić każdy kolor na wykresie kołowym z wybranym procentem i obszarem. Własność granic promieniowania tego wykresu ciasta jest ustawiona na 50% przy szerokości i wysokości 200 px.
Nasza wykres kołowy jest tworzona w kształcie koła. Druga div z identyfikatorem „kontenera” wykorzystuje w nim 8 kolejnych pojemników. Pojemnik „Div” z identyfikatorem „kontenera” zawiera lewy margines 30px, różowe tło i wyściółka 5px. 8 kontenerów w tej sekcji „Div” jest sklasyfikowanych według klasy „wpisu”, która jest stylizowana za pomocą elementów wyświetlania i wyrównania środkowego. Każdy element „Div” tych 8 pojemników zawiera w nim 2 kolejne pojemniki. Pierwszy pojemnik w każdym z nich jest sklasyfikowany z klasą „podstawową” i stylizacji inline, dodając kolor tła dla każdego. Klasa „podstawowa” dla tego pierwszego „div” służy do ustawienia szerokości i wysokości dla wszystkich 8 sekcji, i.mi. 15px szerokość i wysokość dla każdego.
Drugi kontener Div jest sklasyfikowany z „wejściowym” wraz z tytułem wykresu kołowego dla każdego obszaru przekrojowego. Górne i lewe marginesy dla tej sekcji są ustawione odpowiednio na 5px i 3px. Wszystkie 4 główne elementy „div” są tutaj zamknięte. Zapiszmy i uruchommy ten kod, aby zobaczyć wynik wykresu kołowego.
Wyjście pokazuje 1 nagłówek i 1 wykres ciasta z pojemnikiem po lewej stronie, który wyświetla tytuły należące do każdego koloru wykresu kołowego.
Przykład 03:
Zaczyna się od nachylenia 1 największego rozmiaru w HTML. Następnie mamy 5 elementów „div” wykorzystywanych do tworzenia wykresu 5 ciasta. Używamy tej samej klasy nazwy dla wszystkich 5 elementów div, i.mi. klasa = „ciasto”. Używamy stylizacji w każdej sekcji Div, aby ustawić wartość procentową dla każdej wykresu kołowego za pomocą znaku „-p” ustawionego na 20, 40, 95, 80 i 75. Wraz z tym właściwość „-col” służy do ustawienia koloru dla każdej wykresu ciasta, z wyjątkiem pierwszej, i.mi. ciemnoniebieski, fioletowy, zielony i żółty. Osie x, y i z są ustawione dla wszystkich 4 wykresów kołowych innych niż pierwsza.
Rzućmy okiem na styl tej strony HTML. Używamy klasy „ciasta”, aby stylizować pierwszy element DIV z procentem 20 z ciemnoczerwonym kolorem. Do stworzenia standardowego kształtu wykresu kołowego wykorzystywane są także „-B”, szerokość, szerokość, współczynnik kształtu, styl wyświetlania, marginesy i różne właściwości związane z czcionką. Przedsunięcia przed i po są używane do dodawania zawartości i określenia pozycji i promienia granicznego dla elementu przed i po „Pie” Element klasy. Niektóre inne właściwości przejściowe, transformacyjne i tłumaczone są wykorzystywane do stylizacji wykresów kołowych.
Wyjście dla wszystkich 5 wykresów kołowych jest wyświetlane z 5 różnymi kolorami i wartościami procentowymi.
Wniosek
Ten artykuł pokazuje ogromne zastosowanie diagramów i wykresów w różnych dziedzinach obliczeń i życia w ogóle, takich jak przemysł, ekonomiczna, internetowa bankowość internetowa, e -commerce i wiele innych. Omówiliśmy różne przykłady HTML w celu zilustrowania zastosowania różnych i standardowych właściwości stylizacji CSS, które są używane do tworzenia wykresów kołowych. Wszystkie przykłady pokazują bardzo różne właściwości, a jednak zupełnie inne wykresy kołowe dla stron HTML.