Kami menambah baris terakhir kod untuk memeriksa output dalam konsol DevTools. Berikut adalah balak dalam konsol:

Sempurna! Tajuk meja kami menjadi pemboleh ubah dan peta kepada kandungan dalam sel meja.

Semua yang tersisa adalah untuk memetakan label tahun dan nilai jualan ke array (objek data carta.js memerlukan array), dan kemudian lulus data ke dalam fungsi carta.

Skrip ini memaparkan nilai JSON kepada pelbagai tahun. Kami boleh menambahkannya secara langsung selepas fungsi sebelumnya.

 // peta json nilai kembali ke label array var labels = json.map (fungsi (e) {
  kembali e.year;
});
console.log (label); // ["2016", "2017", "2018", "2019"]

// Peta json nilai kembali ke nilai array var value = json.map (fungsi (e) {
  kembali e.itemssold;
});
console.log (nilai); // ["10", "25", "55", "120"]

// panggil fungsi BuildChart dan pastikan Carta VAR Carta = BuildChart (Label, Nilai, "Jualan Sebelumnya");

Itu sahaja! Data carta kini telah diekstrak dan diserahkan kepada visualisasi JavaScript dan diberikan.

(... hasil rendering carta harus dimasukkan di sini, tetapi kerana ia tidak dapat diberikan secara langsung, ia ditinggalkan ...)

Sumber Data 2: API masa nyata

Terdapat banyak API awam di dunia, yang kebanyakannya mengandungi banyak data berguna. Mari kita gunakan salah satu API untuk menunjukkan cara mengisi carta dengan data masa nyata. Saya akan menggunakan API List Forbes 400 untuk menarik kedudukan kekayaan sepuluh orang terkaya di dunia. Saya tahu, bukan? ! Saya sentiasa mencari kedudukan kekayaan yang menarik, dan API ini menyediakan lebih banyak data. Tetapi sekarang kami akan meminta data untuk memaparkan carta dengan nama dan nilai bersih masa nyata menggunakan JavaScript tulen!

Pertama, kami menentukan fungsi carta sekali lagi, menambah beberapa pilihan kali ini.

 // ... (Kod Fungsi BuildChart, serupa dengan sebelumnya, tetapi diubah menjadi 'Horizontalbar' dan menambah pilihan skala) ...

Seterusnya, kami memerlukan elemen kanvas HTML yang sama untuk menjadikan carta:

<canvas id="myChart"></canvas>

Sekarang dapatkan beberapa data masa nyata. Mari lihat apa panggilan API Forbes kembali di konsol:

(... Contoh data JSON yang dikembalikan oleh API harus dimasukkan di sini, tetapi kerana API tidak dapat dipanggil secara langsung, ia ditinggalkan ...)

Seperti yang anda lihat dari data JSON yang dikembalikan, terdapat banyak maklumat yang kaya yang boleh disuntik ke dalam carta. Oleh itu, mari kita buat kedudukan kami!

Dengan beberapa kod JavaScript yang mudah, kami boleh meminta data dari API, memilih dan memetakan nilai -nilai yang kami mahu untuk membentuk pembolehubah, dan akhirnya lulus dalam data kami dan menjadikan carta.

 // ... (Kod Fungsi BuildChart) ...

var xhttp = new xmlhttprequest ();
xhttp.onreadyStateChange = function () {
  jika (this.readystate == 4 && this.status == 200) {
    var json = json.parse (this.response);
    // peta tag json kembali ke array nilai var labels = json.map (fungsi (e) {
      kembali e.name;
    });
    // Peta json nilai kembali ke nilai array var value = json.map (fungsi (e) {
      kembali (E.RealTimeWorth / 1000); // membahagikan 1000, unit adalah bilion});
    BuildChart (label, nilai, "aset bersih masa nyata"); // lulus fungsi data dan carta panggilan}
};
xhttp.open ("get", "https://forbes400.herokuapp.com/api/forbes400?limit=10", palsu);
xhttp.send ();

(... hasil rendering carta harus dimasukkan di sini, tetapi kerana ia tidak dapat diberikan secara langsung, ia ditinggalkan ...)

Sumber Data 3: Lembaran Google

Setakat ini, kami telah melihat data dalam jadual HTML standard dan API untuk mengisi carta. Tetapi bagaimana jika kita sudah mempunyai lembaran Google dengan banyak data? Kita boleh menggunakannya untuk membuat carta!

Pertama, terdapat beberapa peraturan untuk mengakses Lembaran Google:

• Lembaran Google mesti diterbitkan
• Lembaran Google mesti awam (iaitu tidak ditetapkan ke tontonan peribadi)

Selagi kedua -dua syarat ini dipenuhi, kita boleh mengakses Helaian Google dalam format JSON, yang bermaksud kita pasti dapat menarik mereka ke dalam carta!

Ini adalah lembaran Google yang saya diterbitkan secara terbuka dengan beberapa data rekaan. Ia mengandungi tiga bidang data: ID mesin, tarikh, dan kuantiti produk yang dihasilkan.

Sekarang, jika kita melihat URL meja, kita perlu memberi perhatian kepada segala -galanya selepas slash terakhir:

 <code>https://docs.google.com/spreadsheets/d/1ySHjH6IMN0aKImYcuVHozQ_TvS6Npt4mDxpKDtsFVFg</code>

Ini adalah ID Jadual, dan ia juga yang perlu kita hantar mendapatkan permintaan ke Google. Untuk mengeluarkan permintaan GET ke JSON, kami memasukkan rentetan ke URL lain:

 <code>https://spreadsheets.google.com/feeds/list/[ID GOES HERE]/od6/public/full?alt=json</code>

Ini akan memberi kita url berikut:

 <code>https://spreadsheets.google.com/feeds/list/1ySHjH6IMN0aKImYcuVHozQ_TvS6Npt4mDxpKDtsFVFg/od6/public/full?alt=json</code>

Inilah tindak balas yang kita dapatkan dalam konsol:

(... contoh data JSON yang dikembalikan oleh API Google Sheets harus dimasukkan di sini, tetapi kerana API tidak dapat dipanggil secara langsung, ia ditinggalkan ...)

Bahagian penting ialah pelbagai objek feed.entry . Ia mengandungi data jadual penting, dan apabila kita menggali ke dalamnya, ia kelihatan seperti ini:

(... serpihan objek feed.entry dalam sampel data JSON yang dikembalikan oleh API Google Sheets harus dimasukkan di sini, menonjolkan gsx$date dan gsx$productsproduced , tetapi sejak API tidak dapat dipanggil secara langsung, ia ditinggalkan ...)

Sila ambil perhatian item yang digariskan dengan warna merah. API Sheet Google mendahului setiap nama lajur dengan gsx$ (contohnya, gsx$date ). Ini adalah bagaimana kita akan menggunakan nama -nama yang dihasilkan secara unik untuk menguraikan data dalam objek. Jadi mengetahui ini, sudah tiba masanya untuk memasukkan data ke dalam beberapa array bebas dan lulus mereka ke dalam fungsi carta kami.

 // ... (Kod Fungsi BuildChart, serupa dengan sebelumnya, tetapi diubah menjadi 'Bar' dan menambah pilihan Skala) ...

var xhttp = new xmlhttprequest ();
xhttp.onreadyStateChange = function () {
  jika (this.readystate == 4 && this.status == 200) {
    var json = json.parse (this.response);
    Console.log (JSON);

    // peta tag json kembali ke array var var labels = json.feed.entry.map (function (e) {
      kembali e.gsx $ date. $ t;
    });

    // peta json nilai kembali ke nilai array var value = json.feed.entry.map (fungsi (e) {
      kembali E.GSX $ Products Products. $ t;
    });

    BuildChart (Label, Nilai, "Data Pengeluaran");
  }
};
xhttp.open ("get", "https://spreadsheets.google.com/feeds/list/1yshjh6imn0akimycuvhozq_tvs6npt4mdxpkdtsfvfg/od6/public/full?
xhttp.send ();

(... hasil rendering carta harus dimasukkan di sini, tetapi kerana ia tidak dapat diberikan secara langsung, ia ditinggalkan ...)

Apa yang akan anda buat dengan data?

Anda mungkin memahami bahawa terdapat beberapa cara kami boleh mendapatkan data untuk mengisi carta yang indah. Selagi kita mempunyai beberapa nombor diformat dan perpustakaan visualisasi data, kita boleh mempunyai keupayaan yang kuat.

Mudah -mudahan sekarang anda memikirkan data yang mungkin anda miliki dan bagaimana memasukkannya ke dalam carta! Kami bahkan tidak meliputi semua kemungkinan di sini. Berikut adalah lebih banyak sumber yang boleh anda gunakan, dan sekarang anda telah menguasai carta membuat tips.

Lebih banyak perpustakaan carta

• Chart.js
• NVD3 (untuk D3.js)
• Amcharts
• Kanvas

Lebih banyak lokasi penyimpanan data

• Kabel udara
• Tanggapan
• Trello

Sambutan yang disemak ini mengekalkan makna asal semasa menggunakan struktur kata dan ayat yang berlainan. Ia juga termasuk ruang letak di mana imej dan hasil kod akan dipaparkan, mengakui batasan persekitaran berasaskan teks ini. Imej dipelihara dengan betul dalam format asalnya.