一般的なケース - DataV - Alibaba Cloud ドキュメントセンター

このトピックでは、データソースを設定する方法の6つの例を使用して、データフィルターを使用する方法について説明します。

前提条件

[キャンバスエディタ] ページに到達しました。

ケース1: データ形式の変換

[キャンバスエディター] ペインで、[グラフ] ウィジェットを追加します。
右側の設定パネルで [データ] アイコンをクリックします。 [データ設定] タブが表示されます。
[データソースの設定] をクリックします。 [データソースの設定] タブが表示されます。
静的データを次のコードに変更します。
```
{ "Clothing": 21, "Food": 29, "Building Materials": 13, "Entertainment": 33 }
```
説明
現在の静的データがデータ形式のパラメーターフィールドと一致しないため、グラフの内容は空白になります。

[データフィルター] を選択し、コードエディターに次のコードを入力します。

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

このとき、チャートは正常に表示されていることがわかります。
説明
この場合、オブジェクト形式のデータは、配列形式のデータに変換される。パラメータフィールドが再び一致するため、チャートは正常に表示されます。

ケース2: データのフィルタリングとソート

[キャンバスエディター] ペインで、折れ線グラフウィジェットを追加します。
右側の設定パネルの [設定] タブで、[軸] > [x軸] を [カテゴリ] に設定します。
右側の設定パネルで [データ] アイコンをクリックします。 [データ設定] タブが表示されます。
[データソースの設定] をクリックします。 [データソースの設定] タブが表示されます。

静的データを次のコードに変更します。

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

[データフィルター] を選択し、次のコードに基づいてフィールドを変更します。

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

グラフの結果を表示するには、500以上のy値を持つカテゴリを昇順に並べ替えます。
説明
この例では、配列内のオブジェクトをフィルタリングおよびソートできます。フィルター条件と並べ替え条件を変更して、異なるデータをフィルター処理し、返されたデータを昇順または降順で並べ替えることができます。

ケース3: 現在の時刻を取得し、表示をフォーマットする

[キャンバスエディター] ペインで、[タイトル] ウィジェットを追加します。
右側の設定パネルで [データ] アイコンをクリックします。 [データ設定] タブが表示されます。
[データソースの設定] をクリックします。 [データソースの設定] タブが表示されます。

[データフィルター] を選択し、次のコードに基づいてフィールドを変更します。

YYYY-MM-DD HH:mm:ssとしてフォーマットされた現在の時刻を取得します。

戻り値が返されます。例: 2023-02-17Tue 15:30:00

説明

時間形式の説明: https://momentjs.com/docs/#/displaying/format/
日付オブジェクトの説明: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

const getTimeStr = (options = {}) => {
  // Complements the string with zeros. 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;
  // Obtain the year, month, day, week, hour, minute, and second of the current time.
  const year = myDate.getFullYear();
  const month = strComplement(myDate.getMonth() + 1);
  const date = strComplement(myDate.getDate());
  const day ='Week ${'Day 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;
}
// [Try] Change '-' to '/' to see what happens.
return [{ value: getTimeStr({separator: '-'}) }];

説明

この例では、方法は、現在時刻を取得するために実施される。戻り値の形式はTue, 2023-02-07, 17:37:55です。
getTimeStr({separator: '/'}) などの区切り文字を使用できます。戻り値の形式は、2023/02/07 Tue 17:37:55です。
timeStrフィールドを変更して、年、月、日、時、分、秒を組み合わせた表示をカスタマイズできます。たとえば、値をtimeStr = '${year }${ separator }${ month }${ separator }${ date}' に変更できます。戻り値の形式は2023-02-07です。

ケース4: ハイパーリンクのリダイレクトの設定

[キャンバスエディター] ペインで、カルーセル一覧コンポーネントを追加します。
右側の設定パネルで [データ] アイコンをクリックします。 [データ設定] タブが表示されます。
[データソースの設定] をクリックします。 [データソースの設定] タブが表示されます。

静的データを次のコードに変更します。

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

[データフィルター] を選択し、次のコードに基づいてフィールドを変更します。

// Obtain the hyperlink label.
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 => {
    // [Try] Change the https://www.aliyun.com to https://datav.aliyun.com to see the effect
    const baseURL = 'https://www.aliyun.com';
    // [Try] Change area: item.area to id: item.area to see the effect
    const param = {
        area: item.area,
    };
    // [Try] Change color: 'blue' to color: 'red' to see the effect
    const style = {
        color: 'blue',
        background: 'yellow'
    }
    // Set the hyperlink.
    return {
        ...item,
        attribute: getLinkTag(baseURL, param, style).join(item.attribute),
    }
});

説明

このケースでは、ハイパーリンクラベルを取得するメソッドを実装します。baseURLパラメーターはジャンプするアドレス、paramはハイパーリンクで接続されたパラメーター、styleパラメーターはハイパーリンクラベルのstyle属性です。

ケース5: 丸め、小数点以下n桁を保持

[キャンバスエディター] ペインで、カルーセル一覧コンポーネントを追加します。
右側の設定パネルで [データ] アイコンをクリックします。 [データ設定] タブが表示されます。
[データソースの設定] をクリックします。 [データソースの設定] タブが表示されます。
静的データを次のコードに変更します。
```
[{ "y": 1 }, { "y": 1.2246 }, { "y": 1.2332 }]
```

[データフィルター] を選択し、次のコードに基づいてフィールドを変更します。

 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 list data type
 const result = data.map((item) => {
     // [Try] Open the following comments separately to see the effect
     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;

説明

この例では、この方法は、指定された小数点以下の桁数を保持するように実施される。最初のパラメーターは、10進処理のために保持する必要があるデータフィールドです。デフォルトでは、小数点以下2桁が保持されます。ただし、小数点以下の桁数を指定できます。たとえば、newValue = toFixDecimal(item.y,3) の場合、小数点以下3桁が保持され、サンプルデータが返されます: [{ y: 1 }, { y: 1.225 }, { y: 1.233 }] 。
表示するデータ形式が「1.00」の場合、{keepInt: false} を指定する必要があります。 newValue = toFixDecimal(item.y, 3, {keepInt: false}) を指定した場合、文字列形式のデータは [{ y: '1.000 ' }, { y: '1.225' }, { y: '1.233 ' }] になります。

ケース6: 複雑な配列重複排除

[キャンバスエディター] ペインで、カルーセル一覧コンポーネントを追加します。
右側の設定パネルで [データ] アイコンをクリックします。 [データ設定] タブが表示されます。
[データソースの設定] をクリックします。 [データソースの設定] タブが表示されます。

静的データを次のコードに変更します。

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

[データフィルター] を選択し、次のコードに基づいてフィールドを変更します。
```
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;
    }, []);
}
// [Try] Open the following comments in turn to see the effect. x and y are object keys.
return uniq(data, ['y']);
// return uniq(data, ['x']);
// return uniq(data, ['x', 'y']);                    
```
説明
この場合、配列重複排除が実装される。次の例のデータに示すように、指定したフィールドを渡すことで重複排除データを返すことができます。yフィールド重複排除,uniq (データ、['y'])、返されるデータは[{ "x": "clothing", "y": 800 }, {"x": "food", "y": 779 }, {"x": "building materials", "y": 180 },{ "x": "clothing", "y": 192 }],y同じフィールド値を持つデータは、最初の順序でのみ保持されます。xとyフィールド重複排除,uniq (データ, ['x', 'y'])の後、xとy同じフィールド値を持つデータが最初に保持されます。