<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>

<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:

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

<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. ?