Grafik responsif, masa nyata di WordPress: Plugin dan Plotting

3

Takeaways Key

• Perpustakaan Flot adalah alat yang berkesan untuk mewujudkan graf responsif, masa nyata dalam tapak WordPress. Ia mudah dilaksanakan dan berfungsi pada semua peranti.
• Borang Tracker Pushups dan Jadual Pangkalan Data boleh digunakan untuk mengisi data dalam graf. Sebaik sahaja sistem ini ada, apa -apa jenis data grafik boleh dibuat.
• Flot untuk plugin WordPress boleh digunakan untuk mendaftar dan menjalankan perpustakaan Flot di WordPress. Walau bagaimanapun, perpustakaan juga boleh dilaksanakan tanpa plugin.
• Mewujudkan graf responsif, masa nyata melibatkan beberapa langkah termasuk mendapatkan perpustakaan Flot, membuat pos hasil pushups, dan mewujudkan graf. Adalah penting untuk memahami bagaimana Flot menafsirkan data dan tidak bergantung semata -mata untuk menyalin dan menampal kod.

Di bahagian siri ini untuk mewujudkan graf yang responsif, masa nyata dalam laman WordPress, kami akan akhirnya mendapat barangan yang baik! Tiga bahagian terakhir adalah untuk mendapatkan pereka baru sehingga mempercepatkan. Jika anda baru tiba, melangkaui terlalu cepat, atau mendapat keliru dengan terang, kembali ke bahagian -bahagian terdahulu dan semak sedikit. Sesetengah kod agak spesifik untuk projek ini, seperti timestamp UNIX yang diperlukan untuk membuat kerja perpustakaan graf kami. Saya telah membina borang pelacak pushups mudah dan jadual pangkalan data untuk digunakan dengan graf Flot kami. Sudah tentu, anda boleh menggunakan hampir mana -mana sumber data untuk mengisi data di halaman anda. Tetapi, demi mengajar pemula bagaimana untuk mula bekerja dengan bentuk dan phpmyadmin, saya ingin berjalan melalui keseluruhan proses dari awal. Sebaik sahaja anda mempunyai sistem ini di dalam laman web WordPress anda, anda boleh membuat apa -apa jenis data grafik. Perpustakaan graf Flot adalah luas dan sangat mudah dilaksanakan. Seperti yang saya dapat menunjukkan, anda boleh membilas dan ulangi dengan tracker pushups kami dan membuat sistem yang kuat untuk memaparkan data ini-semuanya dalam masa nyata dalam laman web responsif.

Langkah 1: Dapatkan Perpustakaan Flot

Saya menggunakan Flot untuk graf saya untuk banyak sebab, tetapi kebanyakannya kerana ia mudah dilaksanakan dan saya dapat melakukannya untuk bekerja pada setiap peranti yang boleh dibayangkan. Ia menggunakan ciri kanvas di HTML5 untuk menarik data dan mampu beberapa barangan yang gila dan menakjubkan. Anda boleh menggunakan apa sahaja yang anda mahukan. Tetapi, untuk tutorial ini kita akan menggunakan Flot. Khususnya, kami menggunakan plugin saya (Flot untuk WordPress) untuk mendaftar dengan betul dan menjalankan perpustakaan Flot di WordPress. Saya sangat mengesyorkan menggunakan plugin, tetapi anda boleh melaksanakan Flot tanpa ia. Flot untuk plugin WordPress

Langkah 2: Buat Hasil Pushups Post

Di WordPress, pergi ke "Post" s> "Tambah Baru" dan buat jawatan dengan tajuk "Hasil Pushups." Di dalam badan, letakkan kod shortcode berikut:

[pushups_results_sc]

Terbitkan siaran dan anda sudah selesai. Sekarang, kandungan pos akan memaparkan teks tepat "[pushups_results_sc]" kerana kami tidak benar -benar membuat fungsi untuk shortcode lagi.

Langkah 3: Buat graf kami

Dalam bahagian 2 siri ini, kami mencipta jadual baru dalam pangkalan data WordPress kami yang dipanggil Pushups. Kami menggunakannya untuk menyimpan maklumat pushups dari borang kami. Jika anda benar -benar selesa dengan phpmyadmin, pergi ke tab SQL dan jalankan pertanyaan ini untuk membuat jadual yang akan kami gunakan: [Bahasa Sourcecode = "SQL"] Buat Jadual `{pangkalan data anda}`. `pushups` ( `pushups_id` int (10) tidak null auto_increment, `pushups_count` int (3) tidak batal, `pushups_date` varchar (15) tidak batal, `pushups_wpuser` varchar (100) tidak batal, `aktif` int (2) tidak null lalai '1', Indeks (`pushups_id`) ) Enjin = myisam [/Sourcecode] Segala -galanya hingga ke tahap ini adalah tentang mendapatkan infrastruktur di tempat supaya anda boleh mula menarik data dan memaparkannya dengan cara yang hebat. Dari sini, ini semua tentang graf! Buat fail PHP baru dan panggil ia pushups_results.php. Anda akan memuat naik ini ke Folder WP-Content/Plugin/Flot-For-WP/Flot anda selepas anda menyisipkan kod berikut: [bahasa sourcecode = "php"] Php /* Penerangan: Kod ini dimaksudkan untuk dipanggil oleh kod pendek WordPress Ia membuat panggilan ke pangkalan data dan memaparkan data dalam carta Flot. Pengarang: @jphornor dan @tarahornor Lesen: GPL3 */ // Inilah fungsi kami! fungsi pushups_results () { /* Dapatkan sambungan DB. Jika anda tidak membuat connect_to_db.php fail, tambahkan maklumat sambungan pangkalan data anda sendiri di sini */ termasuk ("connect_to_db.php"); connect_to_db (); /* Ini menjadikan kami pengguna yang dilog masuk sekarang dan menyerahkan nama pengguna kepada WPUser yang berubah -ubah, yang digunakan dalam pertanyaan utama */ get_currentuserInfo (); $ current_user = wp_get_current_user (); $ wpuser = $ current_user-> user_login; // ujian besar! Jika pengguna tidak log masuk, mereka tidak mendapat apa -apa! jika (! is_user_logged_in ()) { echo ' Login Untuk melihat hasil pushup!

Register Jika anda belum lagi.

'; } lain { // pertanyaan $ sql = mysql_query ("Pilih * dari pushups di mana` pushups`.`pushups_wpuser` = '$ wpuser' dan `pushups`.`active` = 1 pesanan oleh` pushups`.`pushups_date` asc "); /* Pertanyaan min dan max. Secara amnya tidak perlu menghasilkan angka min dan maksimum kami sendiri untuk Flot, proses kami di bawah membuat data Tetapkan yang berakhir dengan koma, yang mengalir menafsirkan sebagai sifar. */ $ min = mysql_query ("Pilih pushups_count dari pesanan pushups oleh pushups_count ASC Limit 1"); $ max = mysql_query ("Pilih pushups_count dari pesanan pushups oleh pushups_count desc had 1"); // kita perlu mengira titik min pada graf sementara ($ row = mysql_fetch_array ($ min)) { $ min_count = $ row ['pushups_count']; } $ min_count = $ min_count * .9; // ini memberi kita ruang pernafasan di carta // Mari kita hitung titik maksimum pada graf sementara ($ row = mysql_fetch_array ($ max)) { $ max_count = $ row ['pushups_count']; }$ max_count = $ max_count * 1.1; // ini juga memberi kita ruang pernafasan di carta /* Sekarang kami menjana JavaScript dan HTML kami ke halaman. Ini bukan cara kegemaran saya untuk melakukannya, tetapi ia mendapat pekerjaan yang dilakukan. */ echo '

'; // Sesuaikan lebar dan ketinggian untuk pemasangan WP anda dalam fail susun atur.css Echo '

Pushup Results for'. $ wpuser. '

'; echo '

'; echo ' jQuery (dokumen) .ready (fungsi ($) { var d1 = [ {label: "Pushups Tracker untuk '. $ wpuser. '", Data: ['; sementara ($ row = mysql_fetch_array ($ sql)) { echo '['. $ row ['pushups_date']. ','. $ Row ['pushups_count']. '],'; } echo ']}]; var placeholder = $ ("#placeholder"); var plot = $ .plot (placeholder, d1, { xaxis: {mod: "masa"}, Mata: {Show: True, Simbol: "Circle"}, garis: {show: true},, legenda: {show: false}, Yaxis: {min: '. $ min_count. ', Max:'. $ Max_count. '} }); });

'; } }// Kod shortcode dalam pos hasil pushups add_shortcode ('pushups_results_sc', 'pushups_results'); mysql_close (); ?> [/Sourcecode] Saya tahu itu satu tan maklumat, dan saya melakukan yang terbaik untuk menambah komen. Sekali lagi, fail ini dipanggil pushups_results.php masuk dalam folder WP-Content/Plugin/Flot-For-WP/Flot anda. Saya minta maaf kerana memampatkan kod yang kelihatan di sini, tetapi jika anda memuat turun fail sumber saya, anda dapat melihat kandungannya dalam format yang lebih teratur.

recap

Walaupun ini banyak kod, luangkan masa untuk mengkaji semula komen. Terdapat banyak perkara yang berlaku dan jika anda tidak menjejaki bagaimana Flot menafsirkan data, anda akan berjuang menggunakan data anda sendiri. Dalam bahagian ini, kami menangani beberapa proses yang cukup padat. Saya cuba memudahkan anda dengan membiarkan anda menyalin dan menyisipkan, tetapi jangan malas! Anda tidak boleh menambah plugin ini dan mendapat grafik yang indah. Oleh itu, luangkan masa untuk mengkaji semula kod ini. Sebagai rekap cepat, di bahagian siri ini kami dilindungi:

• Dapatkan plugin Flot (untuk orang hanya melompat ke dalam siri)
• Buat jawatan untuk memaparkan hasil
• Tambahkan kod Flot ke halaman yang menarik data kami dan memaparkannya dengan betul.

Percayalah atau tidak, anda sebenarnya kebanyakannya selesai! Jika anda menyegarkan halaman hasil pushups anda, anda harus melihat graf! Di bahagian seterusnya siri ini, saya akan merangkumi beberapa perbincangan yang sangat terperinci tentang cara bekerja dengan PHP dan MySQL berkenaan dengan Flot. Pada bahagian terakhir, saya membincangkan cara gaya graf anda. Jadi, jika anda seorang pemaju dan mendapat graf anda berfungsi dengan segera, anda mungkin mahu melangkau ke bahagian kemudian siri ini.

soalan yang sering ditanya mengenai graf masa nyata responsif dalam plugin WordPress dan plotting

Bagaimanakah saya memilih plugin WordPress yang terbaik untuk membuat graf masa nyata responsif? Beberapa faktor yang perlu dipertimbangkan termasuk jenis graf dan carta yang menyokong plugin, kemudahan penggunaan, pilihan penyesuaian, dan sama ada ia menyokong kemas kini data masa nyata. Anda juga harus mempertimbangkan ulasan dan penilaian plugin, serta keserasiannya dengan versi WordPress anda. Plugin WordPress untuk membuat graf dan carta menawarkan pelbagai pilihan penyesuaian. Anda biasanya boleh menukar warna, fon, dan saiz graf anda. Sesetengah plugin juga membolehkan anda menambah label, legenda, dan tooltip ke graf anda untuk perwakilan data yang lebih baik.

Bagaimana saya mengemas kini graf saya dengan data masa nyata?

Mengemas kini graf anda dengan data masa nyata dapat dicapai melalui pelbagai kaedah bergantung pada plugin yang anda gunakan. Sesetengah plugin menawarkan ciri kemas kini data masa nyata terbina dalam, sementara yang lain mungkin memerlukan anda untuk mengemas kini data secara manual atau menggunakan alat atau perkhidmatan tambahan. Sentiasa merujuk kepada dokumentasi atau sokongan plugin untuk arahan tertentu.

Adakah terdapat plugin WordPress percuma untuk membuat graf masa nyata responsif? Grafik masa nyata. Walau bagaimanapun, perlu diingat bahawa plugin percuma mungkin mempunyai batasan dari segi ciri dan sokongan. Sekiranya anda memerlukan ciri canggih atau sokongan khusus, anda mungkin ingin mempertimbangkan plugin premium.

Bagaimana saya menambah graf ke pos atau halaman WordPress saya? Halaman biasanya mudah. Kebanyakan plugin menyediakan kod shortcode atau blok yang boleh dimasukkan ke dalam pos atau halaman anda. Anda kemudian mengkonfigurasi tetapan graf dan data dalam antara muka plugin.

Bolehkah saya menggunakan plugin ini untuk membuat graf dari data post atau data halaman WordPress saya? Data pos atau halaman WordPress anda. Ini berguna untuk menggambarkan analisis laman web anda, seperti paparan halaman atau demografi pelawat. Sentiasa periksa ciri dan dokumentasi plugin untuk melihat apakah fungsi ini disokong.

Adakah plugin ini menyokong grafik interaktif? Ini bermakna pengguna boleh melayang ke atas titik data untuk melihat lebih banyak maklumat, zum masuk dan keluar, atau bahkan klik pada titik data untuk menavigasi ke halaman lain. Walau bagaimanapun, tahap interaktiviti boleh berubah antara plugin, jadi penting untuk memeriksa ciri ini semasa memilih plugin. Membuat grafik membolehkan anda mengeksport atau mencetak graf anda. Ini berguna jika anda perlu memasukkan graf anda dalam laporan atau persembahan. Format eksport boleh berbeza -beza, tetapi biasanya termasuk PNG, JPEG, PDF, dan SVG. dengan pembina halaman popular seperti Elementor dan Gutenberg. Ini membolehkan anda dengan mudah menambah dan menyesuaikan graf dalam antara muka pembina halaman anda. Walau bagaimanapun, keserasian boleh berubah antara plugin, jadi penting untuk memeriksa ini sebelum memilih plugin.

Adakah saya memerlukan sebarang kemahiran pengekodan untuk menggunakan plugin ini? Mereka biasanya menyediakan antara muka visual di mana anda boleh memasukkan data anda dan menyesuaikan graf anda. Walau bagaimanapun, sesetengah plugin mungkin menawarkan ciri tambahan atau pilihan penyesuaian yang memerlukan pengetahuan asas HTML atau CSS.

Atas ialah kandungan terperinci Grafik responsif, masa nyata di WordPress: Plugin dan Plotting. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!