Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Puchar WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Jak tworzyć słupki i wykresy w WordPress za pomocą Visualizera

Tworzenie słupków, wykresów i wykresów kołowych w witrynie WordPress może poprawić zawartość, czyniąc dane bardziej dostępnymi. Pomaga to prezentować informacje w sposób atrakcyjny wizualnie i łatwy do zrozumienia dla użytkowników.

Dobra wiadomość jest taka, że nie potrzeba do tego żadnego doświadczenia technicznego. Możesz użyć wtyczki takiej jak Visualizer. Sami przetestowaliśmy to narzędzie i bardzo spodobało nam się to, jak prosty był to proces.

Dzięki Visualizer możesz tworzyć wspaniałe, niestandardowe słupki i wykresy, z łatwością pobierając dane z różnych źródeł. W ten sposób możesz poprawić swoją zawartość i ogólne wrażenia użytkownika.

W tym artykule pokażemy, jak tworzyć słupki i wykresy w WordPressie za pomocą Visualizera.

Adding Charts and Graphs in WordPress

Problem ze słupkami i wykresami w WordPress

Istnieje wiele wtyczek umożliwiających dodawanie słupków, wykresów i grafów do twojej treści. Jednak najczęstszą skargą, jaką słyszeliśmy od naszych użytkowników, jest to, że te wtyczki są zwykle zbyt skomplikowane w użyciu.

Niektóre z tych wtyczek oczekują nawet od użytkowników dodawania danych wewnątrz krótkiego kodu w niezwykle skomplikowanych formatach.

Zamiast korzystać z tych wtyczek, wielu użytkowników tworzy wykresy w swoich aplikacjach biurowych i konwertuje je na obraz dla swoich witryn WordPress.

Może to zadziałać, jeśli planujesz nigdy go nie zmieniać. Jednak obraz nie zastąpi interaktywnego wykresu, w którym pomocne dane pojawiają się, gdy użytkownik kliknie określoną sekcję.

Idealne rozwiązanie do tworzenia wykresów i grafów pozwala na:

  • Dodaj dane ze źródła danych na twoim komputerze lub z Internetu.
  • Wypełniaj wykresy, placki, grafy i słupki twoimi danymi.
  • Twórz piękne, interaktywne, kolorowe i przyjazne dla urządzeń mobilnych wykresy.
  • Co najważniejsze, powinien on umożliwiać aktualizację danych w dowolnym momencie.

Dodanie wykresu za pomocą Wizualizatora pomoże zwiększyć zaangażowanie użytkowników, a nawet sprawi, że twoje dane będą łatwe do zrozumienia.

Powiedziawszy to, zobaczmy, jak łatwo dodać słupki i wykresy do twojej witryny WordPress.

Jak tworzyć słupki i wykresy w WordPress za pomocą Visualizera?

Możesz łatwo tworzyć słupki i wykresy w WordPressie za pomocą wtyczki Visualizer. Jest to najlepsza na rynku wtyczka do wizualizacji danych WordPress, która pozwala tworzyć interaktywne wizualizacje danych dla twojej witryny.

Ma nawet darmowy plan, którego można używać do tworzenia słupków i wykresów.

Najpierw należy zainstalować i włączać Visualizer: Tables and Charts Manager for WordPress wtyczkę. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Uwaga: W tym poradniku wykorzystana zostanie darmowa wersja wtyczki. Jeśli chcesz odblokować funkcje pro, możesz kupić płatny plan.

Po włączaniu należy przejść na stronę Visualizer ” Add New Chart z kokpitu WordPress.

Następnie wybierz rodzaj wykresu, który chcesz utworzyć, np. wykres tabelaryczny, kołowy, liniowy lub słupkowy. Następnie kliknij przycisk „Dalej”.

Choose a chart type in the Visualizer plugin

Spowoduje to przejście do następnego kroku, w którym należy kliknąć przycisk „Wybierz plik”, aby importować twoje dane z arkusza kalkulacyjnego Excel z komputera.

Jeśli zapisałeś swój arkusz kalkulacyjny Excel lub Google jako plik CSV, możesz go importować, rozwijając kartę „Importuj dane z adresu URL”.

Gdy to zrobisz, kliknij przycisk „Importuj z CSV”. Następnie wpisz adres URL twojego pliku CSV, aby go osadzać.

Add CSV file URL

Pamiętaj, że twój plik CSV musi mieć nazwy kolumn w pierwszym wierszu i rodzaje danych w drugim wierszu. Wtyczka obsługuje następujące rodzaje danych: ciąg znaków, liczba, wartość logiczna, data, godzina i pora dnia.

Zapraszamy do zapoznania się z przykładowym plikiem, który stworzyliśmy w Google Sheets.

Pie chart data example

Jeśli tworzysz plik CSV za pomocą edytora tekstu, spójrz na ten przykładowy plik CSV:

Codzienne włączanie,czas
ciąg,liczby
Praca,8
Sen,7
Jedzenie,3
Oglądanie telewizji,2
Dojazdy,1

Jeśli jednak twoje dane wykresu są zapisane jako arkusz kalkulacyjny na Dysku Google, możesz dodać je do wykresu bez konieczności ich eksportowania.

Najpierw otwórz twój plik danych w Google Spreadsheets, a następnie kliknij odnośnik Plik ” Udostępnij ” Opublikuj w sieci.

Click Publish to web option

Spowoduje to wyświetlenie wyskakującego okienka, w którym należy wybrać sposób opublikowania tego dokumentu.

Wystarczy wybrać opcję Comma Separated Values (.csv) z rozwijanego menu i kliknąć przycisk „Publish”.

Choose the CSV option from the dropdown menu

Zobaczysz teraz publicznie dostępny adres URL twojego arkusza w postaci pliku CSV. Skopiuj ten adres URL i wróć do wykresu Visualizer.

Adres URL należy dodać w polu „Importuj z CSV”.

Copy the URL to add it to the Visualizer

Gdy wpiszesz adres URL, wtyczka pobierze twój plik CSV i wyświetli podgląd wykresu na żywo.

Teraz możesz przejść do karty „Ustawienia” u góry, aby skonfigurować ogólne ustawienia, takie jak style pisma, format liczb, rozmiar i rozmieszczenie, ustawienia rozmiaru i wiele innych.

Po zakończeniu kliknij przycisk „Utwórz” w dolnej części monitu.

Customize the pie chart

Dodawanie wykresów w wpisach/stronach WordPressa

Dodanie wykresu lub wykresu do twoich wpisów i stron WordPress jest tak proste, jak dodanie obrazków.

Najpierw otwórz nową lub starą stronę/wpis, do którego chcesz dodać wykres kołowy. Gdy już tam będziesz, kliknij przycisk „Dodaj blok” (+) w lewym górnym rogu ekranu.

Spowoduje to otwarcie menu bloków, w którym należy znaleźć i dodać blok Visualizer Chart.

Gdy to zrobisz, kliknij przycisk „Wyświetl istniejący wykres” w samym bloku.

Click Display an existing chart button

Spowoduje to otwarcie nowego monitu w bloku, w którym należy wybrać właśnie utworzony wykres kołowy.

Na koniec kliknij przycisk „Opublikuj” lub „Aktualizuj”, aby zapisać twoje ustawienia.

Teraz możesz przejść na twoją witrynę WordPress, aby zobaczyć wykres kołowy w działaniu.

Pie chart preview

Edycja twoich wykresów wizualizatora w WordPress

Możesz edytować i zmieniać swoje wykresy w dowolnym momencie. Wystarczy przejść na stronę Visualizer ” Chart Library z kokpitu WordPress.

Z tego miejsca można sklonować wykres, usunąć go lub edytować jego ustawienia wizualne za pomocą ikonek pod nazwą wykresu.

Edit chart

Aktualizacja danych dla istniejącego wykresu bez zmiany wykresu jest również dość łatwa dzięki Visualizer.

Jeśli dodałeś dane z arkusza kalkulacyjnego Google, wystarczy zaktualizować dane w arkuszu kalkulacyjnym, przejść do opcji Plik ” Udostępnij ” Opublikuj w sieci i ponownie opublikować arkusz kalkulacyjny.

Twoje zmiany zostaną automatycznie odzwierciedlone na wykresie.

Z drugiej strony, jeśli przesłałeś plik CSV, musisz zaktualizować plik CSV na twoim komputerze. Po zakończeniu wybierz wykres, który chcesz zaktualizować i kliknij odnośnik edycji znajdujący się pod wykresem.

W sekcji „Importuj plik CSV” wystarczy zaimportować twój nowy plik CSV. Zmiany w danych automatycznie będą miały wpływ na wpisy lub strony, na których wstawiłeś ten wykres.

Bonus: Stwórz schemat organizacyjny firmy w WordPress

Jeśli masz witrynę małej firmy, możesz również dodać schemat organizacyjny firmy w WordPress. Schemat ten pokaże strukturę firmy, od dyrektora generalnego po różne zespoły i poszczególnych pracowników w każdym zespole.

Schemat organizacyjny pomaga potencjalnym klientom dowiedzieć się więcej o twojej firmie i ułatwia zespołom komunikację między sobą.

An org chart, created using WordPress

Aby utworzyć wykres, wystarczy zainstalować i włączyć wtyczkę Organization Chart. Aby uzyskać szczegółowe informacje, zapoznaj się z naszym poradnikiem na temat instalacji wtyczki WordPress.

Po włączaniu, przejdź na stronę Wpdevart Chart ” Charts i kliknij przycisk „Utwórz nowy”. Spowoduje to przejście do nowego ekranu, na którym można utworzyć nazwę wykresu.

Następnie dodaj obrazek i tytuł dla CEO twojej firmy w elemencie na ekranie. Następnie kliknij ikonkę strzałki.

Start building an organizational chart

Spowoduje to dodanie kolejnego elementu, w którym można dodać tytuł i obrazek dla osoby następującej po dyrektorze generalnym. Następnie kliknij element ponownie, aby zobaczyć wiele ikonek strzałek w różnych kierunkach.

Pomoże to stworzyć strukturę firmy z wieloma oddziałami lub zespołami.

Customizing a company employee chart

Po zakończeniu kliknij przycisk „Zapisz”, aby zapisać twoje ustawienia.

Teraz otwórz stronę, na której chcesz dodać schemat organizacyjny i dodaj blok „Schemat organizacyjny WpDevArt”. Następnie wybierz utworzony wykres z menu rozwijanego w samym bloku.

Na koniec kliknij przycisk „Opublikuj” lub „Aktualizuj”, aby zapisać twoje ustawienia. Aby uzyskać więcej informacji, zapoznaj się z naszym poradnikiem na temat tworzenia schematu organizacyjnego Twojej firmy w WordPress.

Adding a block to a WordPress website

Mamy nadzieję, że ten artykuł pomógł Ci dodać słupki i wykresy do Twojej witryny WordPress. Warto również zapoznać się z naszym przewodnikiem dla początkujących na temat dostosowywania kolorów w witrynie WordPress i naszymi typami ekspertów dla najlepszych zabawnych wtyczek WordPress, których brakuje.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz na niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak WPBeginner jest finansowany, dlaczego to ma znaczenie i jak możesz nas wspierać. Oto nasz proces redakcyjny.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Najlepszy zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi - zbiór produktów i zasobów związanych z WordPressem, które każdy profesjonalista powinien mieć!

Reader Interactions

21 komentarzyZostaw odpowiedź

  1. Adam

    I am able to generate the chart and publish it on my site, but how to I edit the height and width once the shortcode?

  2. Judith Hollies

    Thank you so much for this clear tutorial. I’m trying to create a pie chart in wordpress and have successfully activated the visualizer plug-in. But when I copy the info over from either excel or google drive (following your steps) both times the first row of stats is omitted in the pie chart. I’ve tried re-ordering the stats, placing them in different locations, but it’s always the first row that gets omitted! Can you help me! Judith

  3. mandeep

    How we comparison between two app like app A and app B and now for i want to make a graph chart both of them in blog of wordpress?How i do it?Can you tell me here?

  4. Felix

    Thanks for the review. How do you handle values with a comma eg. 2.232,42 if you have to use commata as a seperator for the Visualizer?

  5. david

    Hi Great plugin, I solved all my problems except one.
    How do you edit a chart in the visualizer library, when I click on the edit icon all I get is a blank screen, is this just me – plugin conflict or something, or is there a problem with the Visualizer plugin
    Any ideas?
    Thanks
    David

  6. david

    Hi, I’m trying to replicate your example above from „Adding a Chart in WordPress using a CSV file”, but when I click „From Computer” in „Upload csv file” and select the file I copied from your example I get: „CSV file is broken or invalid. Please, try again”
    Any ideas what the problem may be, any help greatly appreciated.
    Thanks
    David

  7. Richard G

    Hello

    Thank you for this post

    However maybe you can help me for one of my client. He has a group of students, each one have a private area

    My client wants to integrate somes customs fields. Basicly each student will enter his datas into this custom fields, and these datas will be convert into a chart or a curve (tracking weight loss or mass gain for exemple)

    Any idea?

    Thank you
    Richard

  8. Chad

    Thanks for the great tutorial. When I drop down the „upload CSV file” I am unable to click on the button for „From Web”, as it is not highlighted in blue. So I must add the data „from Computer”. I noticed that in the screen shot above the „from Web” button is also not highlighted. Has anybody else had this problem and figured out a solution?
    Thanks Again

  9. Artur

    Thanks a lot !!!!!!

    I love you guys, you solve my very long issue.
    Thanks for this excellent plugin.

    Recommended to all.

  10. Tom Horn

    I use charts on my blog often so this really comes in handy. Thanks alot.

  11. Jeff

    How do you make the bars thicker?

  12. Franco Castillo

    I just downloaded the Visualizer plugin, and I opened it in Winrar. Can anyone tell me how to activate the plugin in Winrar?

  13. Richard

    Hello

    Yes very interesting indeed thanks!

    I have the same question (and sorry for my english), i need to create personnal charts from datas feed by a user thrue a table on the website(and insert the final chart in the profil page of the user). Do you think it can be done? do you have any clues?

    Thanks

  14. Stephen

    Great looking plugin. Have been waiting for something like this for ages. :)

    How feasible is it to be able to read data from custom fields, instead of a CSV file or a Google Drive spreadsheet?

    Is this a feature that you may consider implementing?

    That way, data could be kept in the WordPress database, and be updated from the front end of the website.

    For me, that would be really useful!

    – Stephen

  15. Jotpreet Singh

    hey, Awesome. Can this be done via google docs or any other online method. I’m running a blog on wordpress.com. Hope something, would come out. Do you have any ?

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszymi polityka komentarzy, a Twój adres e-mail NIE zostanie opublikowany. NIE używaj słów kluczowych w polu nazwy. Przeprowadźmy osobistą i konstruktywną rozmowę.