Banyak cara mendapatkan data ke dalam carta

Pada masa kini, data ada di mana -mana, sama ada fail teks biasa, API rehat, atau lembaran Google dalam talian ... semuanya tersedia! Ia adalah sumber data yang pelbagai yang menjadikan pembinaan carta lebih daripada sekadar pangkalan data projek tempatan -di mana terdapat data, terdapat kaedah.

Artikel ini akan meneroka cara membuat carta visualisasi data JavaScript menggunakan pelbagai sumber data.

Jika anda ingin melakukannya, kami akan menggunakan carta.js, muat turun dan masukkannya dalam persekitaran pembangunan anda:

<code></code>

Sumber Data 1: Jadual Data HTML

Banyak laman web menggunakan lembaran data, yang dapat difahami kerana mereka adalah cara yang baik untuk memaparkan data. Tetapi tidakkah lebih baik jika anda dapat dengan mudah membuat carta visual dengan data dalam jadual?

Dengan hanya sedikit kod JavaScript, anda boleh mengekstrak data dari jadual HTML dan menyediakannya untuk digunakan dalam carta. Sila lihat jadual data berikut:

tahun	Jumlah jualan	Perolehan ($)	Keuntungan ($)
2016	10	200	89
2017	25	550	225
2018	55	1200	600
2019	120	2450	1100

Jadual ini mengandungi data jualan untuk syarikat. Jika kita dapat menariknya ke dalam graf, ia akan menjadi menarik secara visual dan membantu pengguna melihat data. Mari mulakan!

Pertama, mari kita tentukan fungsi carta. Fungsi ini datang terus dari perpustakaan carta.js, jadi jika sesuatu tidak jelas, anda dinasihatkan untuk merujuk kepada dokumentasi. Saya telah menambah beberapa komen untuk menyerlahkan bahagian utama.

 fungsi BuildChart (Label, Nilai, ChartTitle) {
  var ctx = document.getElementById ("myChart"). getContext ('2d');
  var myChart = carta baru (ctx, {
    Jenis: 'Bar',
    Data: {
      Label: label, // tag dataset: [{
        Label: Charttitle, // Siri Nama Data: Nilai, // Nilai Latar Belakang Color: [// Warna latar belakang adat 'RGBA (255, 99, 132, 0.2)',
          'RGBA (54, 162, 235, 0.2)',
          'RGBA (255, 206, 86, 0.2)',
          'RGBA (75, 192, 192, 0.2)',
          'RGBA (153, 102, 255, 0.2)',
          'RGBA (255, 159, 64, 0.2)'
        ],
        BorderColor: [// Warna Sempadan Custom 'RGBA (255,99,132,1)',
          'RGBA (54, 162, 235, 1)',
          'RGBA (255, 206, 86, 1)',
          'RGBA (75, 192, 192, 1)',
          'RGBA (153, 102, 255, 1)',
          'RGBA (255, 159, 64, 1)'
        ],
        BorderWidth: 1 // lebar sempadan}]
    },
    Pilihan: {
      Responsif: benar, // Penyelenggaraan AdaptifSpectratio: False, // Mencegah Lingkungan Lebar Penuh/Tingkah Laku Penuh}
  });
  kembali mychart;
}

Sekarang kita mempunyai fungsi carta untuk membuat data jadual, mari tulis kod HTML untuk jadual dan tambahkan elemen kanvas yang boleh digunakan untuk menyuntik elemen carta. Ini sama seperti data dalam contoh jadual di atas.

tahun	Jumlah jualan	Perolehan ($)	Keuntungan ($)
2016	10	200	89
2017	25	550	225
2018	55	1200	600
2019	120	2450	1100

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

Seterusnya, kita perlu menghuraikan jadual ke JSON menggunakan JavaScript asli. Chart.js akan menggunakan JSON ini untuk mengisi carta.

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

var table = document.getElementById ('DataTable');
var json = []; // baris pertama ialah header header header = [];
untuk (var i = 0; i 

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.

Atas ialah kandungan terperinci Banyak cara mendapatkan data ke dalam carta. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!