5. 凡例名を変えたい

5.1. 完了イメージ

凡例名を変更できます。

../../_images/legendName_goal.png



5.2. 手順1

メニューバーをクリック

../../_images/legendName_01.png


5.3. 手順2

「Flow Editor」をクリック

../../_images/legendName_02.png


5.4. 手順3

「フロー2」タブをクリック

../../_images/legendName_03.png


5.5. 手順4

functionノードを新規作成

../../_images/legendName_04.png


5.6. 手順5

新規作成したfunctionノードをダブルクリック

../../_images/legendName_05.png


5.7. 手順6

コード欄の「return msg;」を削除

../../_images/legendName_06.png


5.8. 手順7

コード欄に以下のコードをコピー&ペースト

// 表示データ選択時
if(msg.payload.length != 0){
    // 凡例名を変更
    let newSeriesArray = msg.payload[0].series.map(elem => {
        const oldSeries = elem;
        let newSeries;
        switch (oldSeries){
            case "変更前の凡例名":
                newSeries = "変更後の凡例名";
                break;
            default:
                newSeries = oldSeries;
                break;
        }
        return newSeries
    });
    msg.payload[0].series = newSeriesArray;

// 表示データ未選択時
}else{
    //何もしない
}

return msg;

注釈

変えたい凡例名が複数あるとき、下記のように case 文を増やしていけば良いです。

// 表示データ選択時
if(msg.payload.length != 0){
    // 凡例名を変更
    let newSeriesArray = msg.payload[0].series.map(elem => {
        const oldSeries = elem;
        let newSeries;
        switch (oldSeries){
            case "変更前の凡例名1":
                newSeries = "変更後の凡例名1";
                break;
            case "変更前の凡例名2":
                newSeries = "変更後の凡例名2";
                break;
            case "変更前の凡例名3":
                newSeries = "変更後の凡例名3";
                break;
            default:
                newSeries = oldSeries;
                break;
        }
        return newSeries
    });
    msg.payload[0].series = newSeriesArray;

// 表示データ未選択時
}else{
    //何もしない
}

return msg;


5.9. 手順8

コード8行目「変更前の凡例名」に今の凡例名を入力。 コード9行目「変更後の凡例名」に変更後の項目名を入力。

../../_images/legendName_08.png


5.10. 手順9

「完了」をクリック

../../_images/legendName_09.png


5.11. 手順10

編集したfunctionノードを、下図の通りに配置

../../_images/legendName_10.png


5.12. 手順11

このままだと一番上のグラフだけ凡例名が変更されるので、残りのchartノードの前にも追加

注釈

ノードを複製するには

  1. Ctrlキーを押しながら、Cキーを押してノードをコピーし

  2. Ctrlキーを押しながら、Vキーを押して貼り付け

します。

../../_images/legendName_11.png


5.13. 手順12

「デプロイ」をクリック

../../_images/legendName_12.png