Carta JavaScript Interaktif Menggunakan Data Dari Helaian Google

Takeaways Key

Carta JavaScript interaktif boleh dibuat menggunakan data dari Google Sheets, yang menawarkan pengemaskinian dinamik apabila perubahan dibuat ke data spreadsheet.
Proses ini melibatkan mengeksport data dari Google Sheets sebagai JSON, mengambil data ini melalui AJAX, menyusun semula data untuk memadankan format yang diperlukan, membuat carta dengan alat seperti FusionCharts, dan menyesuaikan carta untuk memenuhi keperluan tertentu.
FusionCharts menerima data JSON sebagai pelbagai objek yang mengandungi label dan kunci nilai, dan carta boleh disesuaikan dari segi jenis, ketinggian, lebar, label, dan sumber data.
Walaupun Google Sheets adalah sumber data yang mudah dan mudah diakses, sumber lain juga boleh digunakan untuk membuat carta JavaScript, dan data boleh dikemas kini secara real-time dengan mekanisme pengundian.

Artikel ini dikaji semula oleh Jeff Smith. Terima kasih kepada semua pengulas rakan sebaya SitePoint untuk membuat kandungan SitePoint yang terbaik boleh!

berjumpa dengan rakan saya Jenny. Beliau baru -baru ini memulakan laman web pengekodan. Dia menyukai pekerjaannya dan sangat gembira sehingga dia bertemu dengan Steve, yang mempunyai reputasi, katakan, bukan pelanggan yang sangat mudah. ​​

Steve mempunyai banyak data dalam spreadsheet dan dia mahu memaparkannya di laman webnya. Rakan kami (sekarang Jenny juga rakan anda!) Mencadangkan bahawa Steve membuat carta dalam Excel dan memuat naiknya sebagai imej ke laman web.

Tetapi Steve menjadi Steve, dia mahu carta itu menjadi interaktif. Bukan itu sahaja, dia juga mahu carta untuk dikemas kini apabila dia membuat perubahan kepada data dalam hamparannya.

Jenny tidak tahu bagaimana untuk menangani masalah ini, jadi dia datang kepada saya. Dan, sebagai sahabat baik saya, saya memberinya nasihat ini:

mula -mula minta pelanggan anda memindahkan datanya ke Google Helaian (kerana itulah yang dilakukan oleh semua orang yang sejuk sekarang). Kemudian kita dapat dengan mudah melaksanakan ciri -ciri yang dia perlukan - carta JavaScript interaktif dan pengemaskinian dinamik.

Pelanggannya bersetuju (bernasib baik!), Dan Jenny dan saya mengodkan penyelesaiannya. Tetapi bagaimana? Nah, itulah tutorial ini akan mengajar anda.

Saya telah membahagikan tutorial ini menjadi lima langkah yang mudah diikuti:

Mengeksport data dari Helaian Google

1. mengambil JSON dari Google Sheets melalui Ajax
2. Penyusunan semula data
3. Membuat carta dengan FusionCharts.
4. Menyesuaikan carta
jadi tanpa ado lanjut, mari kita menyelam!

Mengeksport data lembaran Google sebagai JSON

Sebelum menyelidiki cara mengeksport data, mari kita buat terlebih dahulu. Dengan mengandaikan bahawa anda mempunyai akaun Google, anda boleh melakukan ini dengan pergi ke halaman Google Helaian dan memukul

mulakan butang spreadsheet

baru. Dalam spreadsheet yang dibuka, buat dua lajur: pelakon dan pendapatan . Kemudian isi lembaran yang baru dibuat dengan beberapa data. Saya telah mengambil saya dari sini: Pelakon terbayar tertinggi di dunia 2015.

Seperti yang anda lihat, lajur kiri mengandungi label untuk carta kami, nilai yang betul yang sepadan dengan label tersebut. Bagi anda yang mengikuti di rumah, anda boleh mengambil salinan helaian ini di sini (pergi ke fail > Buat salinan ).

Data yang terdapat di Helaian Google boleh dieksport ke pelbagai format seperti JSON, XML dan lain -lain dan sekali dieksport ke mana -mana format tersebut, ia boleh diakses dengan mudah melalui web.

Untuk membuka dokumen anda ke web, anda perlu membuat perubahan berikut pada tetapan dokumen:

Tetapkan perkongsian dokumen kepada sama ada
• awam di web , atau sesiapa sahaja dengan pautan . Untuk mencapai ini, klik butang Kongsi di sudut kanan atas, kemudian klik pilihan Advanced yang muncul di bahagian bawah kanan pop UP. Terbitkan dokumen ke web. Pilihan ini boleh didapati di bawah
fail
• > Terbitkan ke web
Dengan kedua -dua perubahan yang dibuat, data dalam dokumen boleh diakses dalam format JSON melalui: https://spreadsheets.google.com/feeds/list/spreadsheet/od6/public/basic?alt=json

Anda perlu menggantikan spreadsheet dengan ID lembaran Google anda, yang dalam kes kami ialah 1AOZ_GCPYOEIMMND1N_MEYNOP8TJ0FCXPP1AOUHCPWZO. Anda dapat melihat hasilnya di sini.

menggunakan jQuery untuk mengambil JSON dari Google Sheets

Kami akan menggunakan kaedah JQuery's Get () untuk mengambil data dari Google Sheets. Anda boleh memasukkan jQuery dari CDN seperti yang ditunjukkan:

dengan tag ditambah, hubungi $ .get pada url spreadsheet yang telah kami buat.

<span><span><span><script</span> type<span>="text/javascript"</span> src<span>="https://code.jquery.com/jquery-1.12.0.min.js"</span>></span><span><span></script</span>></span>
</span>

Kod JQuery di atas membuat permintaan AJAX ke URL Helaian Google, dan apabila berjaya mengambil data, ia memanggil fungsi kejayaan. Fungsi ini log data yang dikembalikan dari pelayan ke konsol. Saya akan menggalakkan anda untuk menjalankan skrip ini dan meluangkan masa untuk memeriksa apa yang dikembalikan.

<span>var spreadsheetId = "1Aoz_GcPYoEIMMNd1N_meYNOp8TJ0fCXpp1AoUhCpwZo",
</span>    url <span>= "https://spreadsheets.google.com/feeds/list/" +
</span>          spreadsheetId <span>+
</span>          <span>"/od6/public/basic?alt=json";
</span>
$<span>.get({
</span>  <span>url: url,
</span>  <span>success: function(response) {
</span>    <span>console.log(response);
</span>  <span>}
</span><span>});
</span>

Penyusunan semula data

Data JSON dari Google Sheets perlu disusun semula sedikit untuk memadankan format data yang diterima oleh perpustakaan visualisasi kami. Untuk tutorial ini kami akan menggunakan FusionCharts.

FusionCharts menerima data JSON sebagai pelbagai objek yang mengandungi label dan kunci nilai. Inilah yang kelihatan seperti:

Untuk mencapai matlamat ini, kita perlu menjalankan kod berikut dalam panggilan balik kejayaan jQuery mendapatkan fungsi yang kami tentukan sebelumnya.

<span>[{
</span>  <span>"label": "Robert Downey Jr.",
</span>  <span>"value": "80"
</span><span>}
</span><span>...]
</span>

Apa yang kita lakukan di sini adalah melelehkan setiap objek data lembaran Google yang hadir sebagai respons.feed.Entry dan mengekstrak label dan nilai dari itu. Kemudian kami menyimpannya dalam parseddata array baru, yang akan digunakan oleh carta.

<span>var data = response.feed.entry,
</span>    len <span>= data.length,
</span>    i <span>= 0,
</span>    parsedData <span>= [];
</span>
<span>for (i = 0; i < len; i++) {
</span>  parsedData<span>.push({
</span>    <span>label: data[i].title.$t,
</span>    <span>value: data[i].content.$t.replace('Income: ', '')
</span>  <span>});
</span><span>}
</span>

Label boleh didapati dalam tajuk. $ T Kunci dan Nilai boleh didapati dalam kandungan. $ T Kunci objek data. Nilai walaupun mengandungi nama lajur lembaran, yang tidak perlu, oleh itu kita melepaskannya. Selebihnya data dalam lembaran Google tidak diperlukan untuk visualisasi.

Array ParsedData kini mengandungi data dalam format yang akan difahami oleh FusionCharts dan kita boleh meneruskan dengan membuat visualisasi.

Langkah-3: Membuat carta

Sekarang dengan data kami siap dan boleh diakses, kami boleh meneruskan untuk membuat carta. Membuat carta melibatkan langkah -langkah berikut:

• Membuat di dalam mana carta akan diberikan.
• Membuat contoh FusionCharts menggunakan data yang dihuraikan dari lembaran Google.
• memanggil kaedah render pada contoh FusionCharts untuk menjadikannya di Div.

Dalam markup kita termasuk perpustakaan FusionCharts melalui CDN:

<span><span><span><script</span> type<span>="text/javascript"</span> src<span>="https://code.jquery.com/jquery-1.12.0.min.js"</span>></span><span><span></script</span>></span>
</span>

serta elemen yang mengandungi untuk carta. Ini boleh mengandungi beberapa teks pemegang tempat yang akan dipaparkan sebelum carta membuat.

<span>var spreadsheetId = "1Aoz_GcPYoEIMMNd1N_meYNOp8TJ0fCXpp1AoUhCpwZo",
</span>    url <span>= "https://spreadsheets.google.com/feeds/list/" +
</span>          spreadsheetId <span>+
</span>          <span>"/od6/public/basic?alt=json";
</span>
$<span>.get({
</span>  <span>url: url,
</span>  <span>success: function(response) {
</span>    <span>console.log(response);
</span>  <span>}
</span><span>});
</span>

untuk benar-benar membuat dan menjadikan carta bar mendatar asas ke #carta-container, kami akan menambah kod berikut ke panggil balik kejayaan:

<span>[{
</span>  <span>"label": "Robert Downey Jr.",
</span>  <span>"value": "80"
</span><span>}
</span><span>...]
</span>

mari kita lihat beberapa pilihan konfigurasi yang telah kami tentukan untuk carta:

• Jenis: mentakrifkan jenis carta yang kita akan plot - bar2d dalam contoh ini.
• ketinggian: ketinggian carta dalam piksel.
• Lebar: Lebar carta.
• carta: Di sini kita boleh menetapkan perkara seperti tajuk, label untuk kedua -dua paksi, awalan nilai, dan lain -lain
• Data: Data carta akan dibina dari.

Dan inilah demo dari apa yang kita ada setakat ini:

Lihat carta JavaScript Pen JavaScript oleh SitePoint (@SitePoint) pada Codepen.

Menyesuaikan carta

Walaupun demo di atas berfungsi, ia kelihatan mungkin sedikit generik. Nasib baik anda boleh menyesuaikan hampir setiap aspek penampilan carta. FusionCharts mempunyai beberapa dokumentasi yang sangat baik, yang saya cadangkan anda menyemak.

Inilah carta yang sama disesuaikan untuk melihat sedikit lagi, ahem, menarik.

Lihat carta JavaScript Pena Google (2) oleh SitePoint (@SitePoint) pada Codepen.

Kesimpulan

Seperti yang anda lihat, tidak begitu sukar untuk membuat carta langsung dari Helaian Google. Carta JavaScript langsung juga boleh dijana untuk jenis carta kompleks, carta pelbagai siri. Satu -satunya perkara yang perlu dilakukan untuk carta kompleks ialah cara menyusun semula data dari lembaran Google ke format yang diterima oleh carta. Segala -galanya tetap sama.

• Untuk maklumat lanjut mengenai cara bekerja dengan data Google Sheets, lihat dokumentasi Google.
• Saya menggunakan carta bar asas untuk tutorial ini, tetapi jika anda mahu sesuatu yang berbeza, lihat jenis carta yang berbeza yang terdapat di sini.

PS: Saya akan berkeliaran di bahagian komen di bawah jadi berasa bebas untuk menembak apa -apa soalan yang anda ada mengenai tutorial ini. Saya lebih gembira dapat membantu!

Soalan Lazim (Soalan Lazim) pada carta JavaScript interaktif menggunakan data dari Google Sheets

Bagaimana saya boleh membuat carta JavaScript interaktif menggunakan data dari Google Helaian? Pertama, anda perlu menyediakan API Helaian Google anda. Ini melibatkan membuat projek baru dalam konsol Google Cloud, membolehkan API Lembaran, dan mewujudkan kelayakan. Sebaik sahaja anda mempunyai kunci API anda, anda boleh menggunakannya untuk mengakses data Helaian Google anda. Seterusnya, anda perlu membuat carta anda menggunakan JavaScript. Terdapat beberapa perpustakaan yang tersedia untuk ini, seperti Chart.js, HighCharts, dan Google Charts. Anda boleh menggunakan perpustakaan ini untuk membuat pelbagai jenis carta, termasuk carta bar, carta talian, dan carta pai. Akhirnya, anda perlu menyambungkan carta anda ke data Helaian Google anda. Ini melibatkan mengambil data dari lembaran Google menggunakan kunci API, menguraikan data ke dalam format yang dapat difahami oleh perpustakaan carta anda, dan kemudian mengemas kini carta dengan data. Carta menggunakan data dari Google Sheets?

Beberapa isu biasa apabila membuat carta JavaScript interaktif menggunakan data dari Google Sheets termasuk masalah dengan kunci API, isu dengan mengambil data, dan kesukaran dengan menguraikan data. Jika kekunci API anda tidak disediakan dengan betul, anda mungkin tidak dapat mengakses data Helaian Google anda. Sekiranya anda menghadapi masalah mengambil data, ia mungkin disebabkan oleh masalah rangkaian atau masalah dengan API Helaian Google. Sekiranya anda menghadapi masalah menghuraikan data, mungkin kerana data dalam format yang tidak dapat difahami oleh perpustakaan carta anda. Untuk menyelesaikan masalah ini, anda harus menyemak kunci API anda, menguji sambungan rangkaian anda, dan memastikan data anda dalam format yang serasi. > Ya, anda boleh menggunakan sumber data lain selain Helaian Google untuk carta JavaScript anda. Kebanyakan perpustakaan carta, termasuk carta.js, highcharts, dan carta Google, boleh menerima data dalam pelbagai format, termasuk JSON, CSV, dan XML. Anda boleh mengambil data ini dari pelbagai sumber, termasuk pangkalan data, API, dan fail tempatan. Walau bagaimanapun, menggunakan Helaian Google sebagai sumber data mempunyai beberapa kelebihan, termasuk persediaan mudah, kemas kini masa nyata, dan keupayaan untuk berkongsi dan bekerjasama dengan data.

Bagaimana saya boleh mengemas kini carta JavaScript saya secara real-time dengan data dari Google Sheets?

Untuk mengemas kini carta JavaScript anda dalam masa nyata dengan data dari Google Sheets, anda perlu menyediakan mekanisme pengundian. Ini melibatkan secara berkala mengambil data dari Helaian Google dan mengemas kini carta dengan data baru. Anda boleh melakukan ini menggunakan fungsi setInterval JavaScript, yang membolehkan anda melaksanakan fungsi pada selang waktu yang ditentukan. Dalam fungsi ini, anda akan mengambil data dari Helaian Google, menghirupnya ke dalam format yang dapat difahami oleh perpustakaan carta anda, dan kemudian mengemas kini carta dengan data baru. ?

Ya, anda boleh berkongsi carta JavaScript interaktif anda dengan orang lain. Kebanyakan perpustakaan carta, termasuk carta.js, highcharts, dan carta Google, membolehkan anda mengeksport carta anda sebagai imej atau PDF. Anda kemudian boleh berkongsi fail ini dengan orang lain. Sebagai alternatif, jika carta anda dihoskan di laman web, anda hanya boleh berkongsi URL halaman. Jika anda menggunakan Helaian Google sebagai sumber data anda, anda juga boleh berkongsi dokumen Helaian Google dengan orang lain, yang membolehkan mereka melihat dan mengedit data. > anda boleh menyesuaikan penampilan carta JavaScript anda menggunakan pilihan yang disediakan oleh perpustakaan carta anda. Kebanyakan perpustakaan carta, termasuk Chart.js, HighCharts, dan Google Charts, membolehkan anda menyesuaikan pelbagai aspek carta anda, termasuk warna, fon, label, dan petua. Anda juga boleh menambah ciri interaktif, seperti zum dan panning, dan animasi. oleh perpustakaan carta anda. Kebanyakan perpustakaan carta, termasuk carta.js, highcharts, dan carta Google, membolehkan anda menambah ciri interaktif, seperti petua, zum dan panning, dan animasi. Anda juga boleh menambah pendengar acara ke carta anda, yang membolehkan anda melaksanakan fungsi apabila pengguna berinteraksi dengan carta dengan cara tertentu, seperti mengklik pada titik data. App?

Ya, anda boleh menggunakan carta JavaScript dalam aplikasi mudah alih anda. Kebanyakan perpustakaan carta, termasuk carta.js, highcharts, dan carta Google, serasi dengan peranti mudah alih. Walau bagaimanapun, anda mungkin perlu membuat beberapa penyesuaian untuk memastikan bahawa carta anda memaparkan dengan betul pada skrin yang lebih kecil. Ini mungkin melibatkan penyesuaian saiz carta, susun atur unsur -unsur, dan interaksi sentuhan. Carta menggunakan alat pemaju dalam penyemak imbas web anda. Alat ini membolehkan anda memeriksa unsur -unsur carta anda, melihat log konsol, dan melangkah melalui kod JavaScript anda. Jika anda menghadapi masalah dengan data Helaian Google anda, anda juga boleh menggunakan Google Sheets API Explorer untuk menguji permintaan API anda.

bagaimana saya dapat mengoptimumkan prestasi carta JavaScript saya? Ciri -ciri perpustakaan carta anda. Mengambil sejumlah besar data boleh melambatkan carta anda, jadi cuba untuk mengambil data yang anda perlukan. Anda juga boleh mengoptimumkan kod JavaScript anda dengan mengelakkan pengiraan yang tidak perlu dan menggunakan algoritma yang cekap. Kebanyakan perpustakaan carta, termasuk carta.js, highcharts, dan carta Google, juga menyediakan ciri -ciri prestasi, seperti pemuatan malas dan pecutan perkakasan.

Atas ialah kandungan terperinci Carta JavaScript Interaktif Menggunakan Data Dari Helaian Google. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!