Kasus Umum - DataV

Topik ini menjelaskan cara menggunakan filter data dengan enam contoh konfigurasi sumber data.

Prasyarat

Anda telah mencapai halaman Canvas Editor.

Kasus 1: Konversi format data

Di panel Canvas Editor, tambahkan widget Graph.
Klik ikon Data di panel konfigurasi di sebelah kanan. Tab Pengaturan Data akan muncul.
Klik Configure Data Source. Tab Configure Data Source akan muncul.
Ubah data statis menjadi kode berikut:
```
{ "Clothing": 21, "Food": 29, "Building Materials": 13, "Entertainment": 33 }
```
Catatan
Konten grafik menjadi kosong karena data statis saat ini tidak sesuai dengan parameter bidang format data.

Pilih Data Filter dan masukkan kode berikut di editor kode:

function objToArr(obj, name, value) {
  const result = [];
  // Loop tipe data objek
  for (const key in obj) {
    const item = {};
    item[name] = key;
    item[value] = obj[key];
    result.push(item);
  }
  return result;
}
return objToArr(data, 'name', 'value');

Grafik ditampilkan secara normal.
Catatan
Dalam kasus ini, data dalam format objek dikonversi ke data dalam format array. Karena parameter bidang dicocokkan kembali, grafik ditampilkan secara normal.

Kasus 2: Penyaringan dan Pengurutan Data

Di panel Canvas Editor, tambahkan widget line chart.
Di tab Configuration pada panel konfigurasi di sebelah kanan, atur Axes > x-axis ke Category.
Klik ikon Data di panel konfigurasi di sebelah kanan. Tab Pengaturan Data akan muncul.
Klik Configure Data Source. Tab Configure Data Source akan muncul.

Ubah data statis menjadi kode berikut:

[
    { "x": "Clothing", "y": 800 }, { "x": "Food", "y": 779 },
    { "x": "Building Materials", "y": 180 }, { "x": "Entertainment", "y": 523 },
    { "x": "Fresh", "y": 192 }
]

Pilih Data Filter dan ubah bidang berdasarkan kode berikut:

// Filter
  const result = data.filter(item => {
    return item.y >= 500;
  });
  // Urutkan urutan.
  result.sort((a, b) => a.y - b.y);
  return result;

Untuk melihat hasil grafik, filter menyortir kategori dengan nilai y lebih besar dari atau sama dengan 500 dalam urutan menaik.
Catatan
Dalam contoh ini, Anda dapat memfilter dan mengurutkan objek dalam array. Anda dapat memodifikasi kondisi filter dan pengurutan untuk memfilter data yang berbeda dan mengurutkan data yang dikembalikan dalam urutan menaik atau menurun.

Kasus 3: Mendapatkan waktu saat ini dan memformat tampilan

Di panel Canvas Editor, tambahkan widget Title.
Klik ikon Data di panel konfigurasi di sebelah kanan. Tab Pengaturan Data akan muncul.
Klik Configure Data Source. Tab Configure Data Source akan muncul.

Pilih Data Filter dan ubah bidang berdasarkan kode berikut:

Mendapatkan waktu saat ini, diformat sebagai YYYY-MM-DD HH:mm:ss.

Nilai pengembalian telah dikembalikan. Contoh: 2023-02-17Tue 15:30:00.

Catatan

Deskripsi Format Waktu: https://momentjs.com/docs/#/displaying/format/
Deskripsi objek Tanggal: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

const getTimeStr = (options = {}) => {
  // Melengkapi string dengan nol. Input: 8, Output: 08
  const strComplement = (str, digit = 2) => {
    str = typeof str !== 'string' ? `${str}` : str;
    const mask = (new Array(digit + 1)).join('0');
    return mask.slice(str.length) + str;
  }
  const { myDate = new Date(), separator = '-' } = options;
  // Dapatkan tahun, bulan, hari, minggu, jam, menit, dan detik dari waktu saat ini.
  const year = myDate.getFullYear();
  const month = strComplement(myDate.getMonth() + 1);
  const date = strComplement(myDate.getDate());
  const day ='Minggu ${'Hari 123456 '.charAt(myDate.getDay())}';
  const hour = strComplement(myDate.getHours());
  const minute = strComplement(myDate.getMinutes());
  const second = strComplement(myDate.getSeconds());
  const timeStr = `${year}${separator}${month}${separator}${date} ${day} ${hour}:${minute}:${second}`;
  return timeStr;
}
// [Coba] Ubah '-' menjadi '/' untuk melihat apa yang terjadi.
return [{ value: getTimeStr({separator: '-'}) }];

Catatan

Dalam contoh ini, metode diimplementasikan untuk mendapatkan waktu saat ini. Nilai pengembalian dalam format Tue, 2023-02-07, 17:37:55.
Anda dapat menggunakan pemisah, seperti getTimeStr({separator: '/'}). Nilai pengembalian dalam format 2023/02/07 Tue 17:37:55.
Anda dapat memodifikasi bidang timeStr untuk menyesuaikan tampilan gabungan tahun, bulan, hari, jam, menit, dan detik. Misalnya, Anda dapat mengubah nilainya menjadi timeStr = '${year}${separator}${month}${separator}${date}'. Format nilai pengembalian adalah 2023-02-07.

Kasus 4: Konfigurasi pengalihan hyperlink

Di panel Canvas Editor, tambahkan komponen carousel list.
Klik ikon Data di panel konfigurasi di sebelah kanan. Tab Pengaturan Data akan muncul.
Klik Configure Data Source. Tab Configure Data Source akan muncul.

Ubah data statis menjadi kode berikut:

[{ "area": "Zhejiang", "attribute": "100" }, { "area": "Jiangsu", "attribute": "200" }]

Pilih Data Filter dan ubah bidang berdasarkan kode berikut:

// Mendapatkan label hyperlink.
const getLinkTag = (baseURL = '', param = {}, style = {}) => {
    const joint = (obj, insideSeparator = '', betweenSeperator = '') => {
        const result = [];
        for (const key in obj) {
            result.push(`${key}${insideSeparator}${obj[key]}`);
        }
        return result.join(betweenSeperator);
    }
    const url = `${baseURL}?${joint(param, '=', '&')}`;
    const styleCss = joint(style, ':', ';');
    return [
        `<a href="${url}" target="_blank" style="${styleCss}" >`,
        '</a>'
    ]
}
return data.map(item => {
    // [Coba] Ubah https://www.aliyun.com menjadi https://datav.aliyun.com untuk melihat efeknya
    const baseURL = 'https://www.aliyun.com';
    // [Coba] Ubah area: item.area menjadi id: item.area untuk melihat efeknya
    const param = {
        area: item.area,
    };
    // [Coba] Ubah color: 'blue' menjadi color: 'red' untuk melihat efeknya
    const style = {
        color: 'blue',
        background: 'yellow'
    }
    // Tetapkan hyperlink.
    return {
        ...item,
        attribute: getLinkTag(baseURL, param, style).join(item.attribute),
    }
});

Catatan

Kasus ini mengimplementasikan metode untuk mendapatkan label hyperlink, parameter baseURL adalah alamat tujuan lompatan, param adalah parameter yang disambungkan pada hyperlink, dan parameter style adalah atribut gaya dari label hyperlink.

Kasus 5: Pembulatan, simpan n tempat desimal

Di panel Canvas Editor, tambahkan komponen carousel list.
Klik ikon Data di panel konfigurasi di sebelah kanan. Tab Pengaturan Data akan muncul.
Klik Configure Data Source. Tab Configure Data Source akan muncul.

Ubah data statis menjadi kode berikut:

[{ "y": 1 }, { "y": 1.2246 }, { "y": 1.2332 }]

Pilih Data Filter dan ubah bidang berdasarkan kode berikut:

 const toFixDecimal = (num, ...args) => {
     const digit = typeof args[0] === 'number' ? args[0] : 2;
     const options = typeof args[0] === 'object' ? args[0] : (args[1] || {});
     const { keepInt = true } = options;
     const value = Number.parseFloat(num);
     if (keepInt) {
         const base = Math.pow(10, digit);
         return Math.round(value * base) / base;
     } else {
         return value.toFixed(digit);
     }
 }
 // Loop tipe data daftar
 const result = data.map((item) => {
     // [Coba] Buka komentar berikut secara terpisah untuk melihat efeknya
     const newValue = toFixDecimal(item.y); // [ { y: 1 }, { y: 1.22 }, { y: 1.23 } ]
     // const newValue = toFixDecimal(item.y, 1); // [ { y: 1 }, { y: 1.2 }, { y: 1.2 } ]
     // const newValue = toFixDecimal(item.y, {keepInt: false}); // [ { y: '1.00' }, { y: '1.22' }, { y: '1.23' } ]
     // const newValue = toFixDecimal(item.y, 1, {keepInt: false}); // [ { y: '1.0' }, { y: '1.2' }, { y: '1.2' } ]
     return {
         ...item,
         y: newValue
     }
 });
 return result;

Catatan

Dalam contoh ini, metode diimplementasikan untuk mempertahankan jumlah tempat desimal tertentu. Parameter pertama adalah bidang data yang perlu dipertahankan untuk pemrosesan desimal. Secara default, dua tempat desimal dipertahankan. Namun, Anda dapat menentukan jumlah tempat desimal. Misalnya, newValue = toFixDecimal(item.y,3) tiga tempat desimal dipertahankan, data sampel akan dikembalikan: [{ y: 1 }, { y: 1.225 }, { y: 1.233 }].
Jika format data yang ingin Anda tampilkan adalah '1.00', Anda harus menentukan {keepInt: false}. Jika Anda menentukan newValue = toFixDecimal(item.y, 3, {keepInt: false}), data dalam format string adalah [{ y: '1.000' }, { y: '1.225' }, { y: '1.233' }].

Kasus 6: Deduplikasi array kompleks

Di panel Canvas Editor, tambahkan komponen carousel list.
Klik ikon Data di panel konfigurasi di sebelah kanan. Tab Pengaturan Data akan muncul.
Klik Configure Data Source. Tab Configure Data Source akan muncul.

Ubah data statis menjadi kode berikut:

[
    { "x": "Clothing", "y": 800 }, { "x": "Food", "y": 779 },
    { "x": "Building materials", "y": 180 }, { "x": "Food", "y": 779 },
    { "x": "Clothing", "y": 192 }
]

Pilih Data Filter dan ubah bidang berdasarkan kode berikut:
```
function uniq(arr, keyList) {
    const valueSet = {};
    return arr.reduce((result, item) => {
        const key = keyList.map((k) => item[k]).join('#@#');
        if (!valueSet[key]) {
            result.push(item);
            valueSet[key] = true;
        }
        return result;
    }, []);
}
// [Coba] Buka komentar berikut secara bergantian untuk melihat efeknya. x dan y adalah kunci objek.
return uniq(data, ['y']);
// return uniq(data, ['x']);
// return uniq(data, ['x', 'y']);                    
```
Catatan
Dalam kasus ini, deduplikasi array diimplementasikan. Anda dapat mengembalikan data deduplikasi dengan melewatkan bidang tertentu, seperti yang ditunjukkan dalam data contoh menurut deduplikasi bidang y, uniq(data, ['y']), data yang dikembalikan adalah [{ "x": "clothing", "y": 800 }, { "x": "food", "y": 779 }, { "x": "building materials", "y": 180 },{ "x": "clothing", "y": 192 }], data y dengan nilai bidang yang sama hanya akan dipertahankan dalam urutan pertama; deduplikasi bidang x dan y, uniq(data, ['x', 'y']), maka data x dan y dengan nilai bidang yang sama dipertahankan pertama kali dalam urutan.