このトピックでは、Echarts 24 時間折れ線グラフのチャートスタイルと設定パネルについて説明します。
チャートスタイル
設定パネル 
- 設定項目の検索: Canvas エディターの右側のパネルで、[設定] タブをクリックし、右上隅にある [設定項目の検索] をクリックします。[検索] ボックスに必要な設定項目を入力し、検索アイコンをクリックして設定項目をすばやく見つけます。あいまい一致がサポートされています。詳細については、「設定項目の検索」をご参照ください。
- サイズ: ウィジェットのサイズ (ピクセル単位の幅と高さ) を示します。
アイコンをクリックすると、ウィジェットの幅と高さを比例して調整できます。このアイコンをもう一度クリックすると、必要に応じて幅と高さを調整できます。 - 位置: ウィジェットの位置 (ピクセル単位の [X] 座標と [Y] 座標) を示します。[X 座標] は、ウィジェットの左上隅とキャンバスの左枠の間のピクセル距離を示します。[Y 座標] は、ウィジェットの左上隅とキャンバスの上枠の間のピクセル距離を示します。
- 回転角度: ウィジェットの中心点を回転点として使用する回転の角度。単位は度 (°) です。次のいずれかのメソッドを使用して、ウィジェットの回転角度をコントロールできます:
- [回転角度] スピンボックスに角度を直接入力するか、プラス記号 (+) またはマイナス記号 (-) をクリックして [回転角度] スピンボックスの値を増減します。
アイコンの黒い点をドラッグします。
アイコンをクリックして、ウィジェットを水平方向に反転させます。
アイコンをクリックして、ウィジェットを垂直方向に反転させます。
- 不透明度: ウィジェットの不透明度。有効値: 0 と 1。このパラメーターを [0] に設定すると、ウィジェットは非表示になります。このパラメーターを [1] に設定すると、ウィジェットは完全に表示されます。デフォルト値: 1。
レンダーエンジン: 折れ線グラフのレンダリングエンジン。[canvas] と [svg] があります。
凡例: 右側の [目] アイコンをクリックして、凡例スタイルを表示します。
水平位置: ドロップダウンリストをクリックし、凡例とテキストの配置方法を選択します。
自動: デフォルトでは、[自動] はウィジェットの位置と向きに基づいて決定されます。
左揃え: グラフィックがテキストの左側にある場合、[左揃え] になります。
中央揃え: 凡例のグラフィックがテキストと重なる場合、[中央揃え] になります。
右揃え: グラフィックがテキストの右側にある場合、[右揃え] になります。
垂直位置: ドロップダウンリストをクリックし、凡例とテキストの配置方法を選択します。
自動: デフォルトでは、[自動] はウィジェットの位置と向きに基づいて決定されます。
上揃え: グラフィックがウィンドウの上にある場合、[上揃え] になります。
中央: グラフィックがウィンドウの中央にある場合、[中央] になります。
下揃え: グラフィックがウィンドウの下にある場合、[下揃え] になります。
印刷の向き: ドロップダウンリストから凡例の向きを選択します。
水平: 凡例の水平方向の分布。
垂直: 凡例は垂直方向に分布します。
ピン: [+] または [-] 記号をクリックするか、数値を入力して凡例の内側の余白を調整します。単位: ピクセル。デフォルトの内側の余白は 5 です。
要素の間隔: [+] または [-] 記号をクリックするか、数値を入力して凡例の各項目間の距離を調整します。水平レイアウトの場合は水平方向の間隔、垂直レイアウトの場合は垂直方向の間隔。
テキストスタイル
色: 凡例テキストの色を変更します。詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: 凡例テキストのフォントスタイル。
フォントの太さ: 凡例テキストのフォントの太さ。
フォント: 凡例テキストのフォントファミリー。
フォントサイズ: [+] または [-] をクリックするか、値を入力して凡例のフォントサイズを変更します。
グリッド:
アイコンをクリックして、グリッドスタイルを表示します。左ページの余白: [+] または [-] 記号をクリックするか、値を入力してグリッドの左ページの余白を調整します。単位: ピクセル。
上ページの余白: [+] または [-] をクリックするか、値を入力してグリッドの上ページの余白を調整します。単位: ピクセル。
右ページの余白: [+] または [-] 記号をクリックするか、値を入力してグリッドの右ページの余白を調整します。単位: ピクセル。
下ページの余白: [+] または [-] をクリックするか、値を入力してグリッドの下ページの余白を調整します。単位: ピクセル。
X 軸: [目] アイコンをクリックして X 軸を表示します。
位置: x 軸上のウィンドウの位置を指定します。
下: ウィンドウの下部にある x 軸の位置。
上: ウィンドウの上部にある x 軸の位置。
名前: x 軸の名前。
位置: x 軸上の名前の位置。[開始]、[終了]、または [中央] を選択できます。デフォルト値: 終了。
名前のスタイル
色: x 軸の名前テキストの色を変更します。詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: x 軸の名前のフォントスタイル。
フォントの太さ: x 軸の名前のフォントの太さ。
フォント: x 軸の名前のフォントファミリー。
フォントサイズ: [+] または [-] をクリックするか、値を入力して x 軸の名前のフォントサイズを変更します。
名前の間隔: [+] または [-] 記号をクリックするか、値を入力して軸と軸の間の距離を変更します。
名前の回転: [+] または [-] 記号をクリックするか、値を入力して軸名の回転角度を変更します。
逆再生: このチェックボックスをオンにすると、軸が逆方向に表示されます。このチェックボックスをオフにすると、軸が順方向に表示されます。
静的: このオプションを選択すると、軸が静的な場合、軸と対話できません。
軸: 右側の [目] アイコンをクリックして x 軸を表示します。
ゼロ上: x 軸または y 軸の軸が他の軸のゼロスケール上にあるかどうかを示します。このパラメーターは、他の軸が値軸で、ゼロスケールを含む場合にのみ有効です。
線のスタイル
色: カラーピッカーの説明 を参照して、x 軸の線の色を変更します。
幅: [+] または [-] をクリックするか、値を入力して x 軸の幅を変更します。
タイプ: 軸のタイプ。オプション。有効値: 実線、破線、点線。
不透明度: [+] または [-] 記号をクリックするか、値を入力して x 軸の透明度を変更します。範囲は [0,1] です。
目盛り: 右側の [目] アイコンをクリックして、x 軸のスケールを表示します。
内部: このチェックボックスをオンにすると、軸スケールは内側を向きます。このチェックボックスをオフにすると、軸スケールは外側を向きます。
長さ: [+] または [-] 記号をクリックするか、数値を入力してスケールの長さを変更します。
線のスタイル
色: カラーピッカーの説明 を参照して、目盛りの色を変更します。
幅: [+] または [-] 記号をクリックするか、値を入力して目盛りの幅を変更します。
タイプ: 軸のタイプ。オプション。有効値: 実線、破線、点線。
透明度: [+] または [-] 記号をクリックするか、値を入力して目盛りの透明度を変更します。範囲は [0,1] です。
スケールラベル: 右側の [目] アイコンをクリックして、x 軸のスケールラベルを表示します。
表示形式: 06、06:00、06 時間など、スケールラベルの表示形式を設定します。
内部: このチェックボックスをオンにすると、軸ラベルは内側を向きます。このチェックボックスをオフにすると、軸ラベルは外側を向きます。
回転: スケールラベルの回転角度。カテゴリ軸のカテゴリラベルを表示できない場合は、スケールラベルを回転させて重ならないようにすることができます。回転角度の範囲は -90 度から 90 度です。
外側の間隔: スケールラベルと軸の間の距離。
色: 軸のスケールラベルの色を変更します。詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: 軸ラベルのフォントスタイル。
フォントの太さ: 軸ラベルテキストのフォントの太さ。
フォント: 軸ラベルテキストのフォントファミリー。
フォントサイズ: 軸スケールラベルテキストのフォントサイズ。
行区切り: 右側の [目] アイコンをクリックして、行区切りを表示します。
線のスタイル
色: カラーピッカーの説明 を参照して、x 軸の行区切りの色を変更します。
幅: [+] または [-] 記号をクリックするか、値を入力して x 軸の行区切り線の幅を変更します。
タイプ: x 軸の行区切りのタイプ。オプション。有効値: 実線、破線、点線。
透明度: [+] または [-] 記号をクリックするか、値を入力して x 軸の行区切りの透明度を変更します。値の範囲は 0 から 1 です。
Y 軸: 詳細については、「X 軸」をご参照ください。
ダイアログボックス: 右側の [目] アイコンをクリックして、ダイアログボックスを表示します。
トリガータイプ: トリガーのタイプ。このパラメーターはオプションです。デフォルト値: 軸。
データ項目: データ項目グラフのトリガー。散布図や円グラフなど、カテゴリ軸のないチャートで使用されます。
軸: 軸トリガー。縦棒グラフ、折れ線グラフ、その他カテゴリ軸を使用するチャートで使用されます。
トリガーしない: 何もトリガーされません。
軸インジケーター: [目] アイコンをクリックして、軸インジケーターを表示します。
タイプ: インジケーターのタイプ。有効値: ラインインジケーター、シャドウインジケーター、クロスインジケーター。
自動吸着: このチェックボックスをオンにすると、軸インジケーターが自動的にポイントに吸着します。この関数は、数値軸と時間軸でより意味があり、小さな数値ポイントを自動的に見つけることができます。
線のスタイル
色: カラーピッカーの説明 を参照して、インジケーターラインの色を変更します。
幅: [+] または [-] 記号をクリックするか、値を入力して線の幅を変更します。
タイプ: 線のタイプを示します。オプション。値は 実線、破線、または 点線 です。
不透明度: [+] または [-] 記号をクリックするか、値を入力してインジケーターラインの不透明度を変更します。値の範囲は 0 から 1 です。
シャドウのスタイルを示します
色: カラーピッカーの説明 を参照して、シャドウの色を変更します。
透明度: [+] または [-] 記号をクリックするか、値を入力してシャドウの透明度を変更します。値の範囲は 0 から 1 です。
クロススタイルを示します
色: カラーピッカーの説明 を参照して、クロスの色を変更します。
幅: [+] または [-] 記号をクリックするか、値を入力して交差を示す線の幅を変更します。
タイプ: 交差のタイプを示します。オプション。有効値: 実線、破線、点線。
透明度: [+] または [-] 記号をクリックするか、値を入力して交差の透明度を変更します。値の範囲は 0 から 1 です。
背景色: ダイアログボックスのテキストラベルの背景色。
テキストスタイル
色: ダイアログボックスのラベルテキストの色を変更します。詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: ダイアログボックスのテキストのフォントスタイル。
フォントの太さ: ダイアログボックスのラベルテキストのフォントの太さ。
フォント: ダイアログボックスのラベルテキストのフォントファミリー。
フォントサイズ: ダイアログボックスのラベルテキストのフォントサイズ。
系列:
または 
アイコンをクリックして、条件付きスタイルを追加または削除します。
または 
アイコンをクリックして、複数の条件付きスタイルの配置スタイルを設定します。
アイコンをクリックして、選択した条件付きスタイルの設定をコピーし、同じ設定の条件付きスタイルを追加します。
タイプ: 系列のタイプ。これには、[line] や [bar] などが含まれますが、これらに限定されません。
名前: カスタム系列の名前。データ内の s フィールド値と組み合わせて使用する必要があります。
マーカーグラフィック: カスタムグラフィック。デフォルト値: 円。有効値: なし、円、正方形、正方形、三角形、ひし形、ピン、矢印。詳細については、ECharts 公式 Web サイトをご覧ください。
マーカーサイズ: [+] または [-] 記号をクリックするか、値を入力してマーカーのサイズを変更します。単位: ピクセル。
アイコンを表示: [目] アイコンをクリックして、アイコンスタイルを表示します。
ホバーアニメーション: このオプションを選択すると、ホバースイッチが有効な場合にアニメーション効果が表示されます。
凡例インタラクションハイライト: このチェックボックスをオンにすると、凡例ホバーが開始されたときにインタラクションがハイライトされます。
ラベル: [目] アイコンをクリックして、ラベルスタイルを表示します。
位置: 折れ線グラフに相当するラベルの位置を設定します。[top]、[left]、[inside] などが含まれますが、これらに限定されません。
測位距離: 折れ線グラフのラベルと境界線の間の距離を設定します。
回転: ラベルを回転させる角度。カテゴリ軸のカテゴリラベルを表示できない場合は、ラベルを回転させて重ならないようにすることができます。回転角度の範囲は -90 度から 90 度です。
色: ラベルテキストの色を変更します。詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: ラベルテキストのフォントスタイル。
フォントの太さ: ラベルテキストのフォントの太さ。
フォント: ラベルテキストのフォントファミリー。
フォントサイズ: ラベルテキストのフォントサイズ。
要素スタイル
色: カラーピッカーの説明 を参照して、要素スタイルの色を変更します。
透明度: [+] または [-] 記号をクリックするか、値を入力して交差の透明度を変更します。有効値: 0 から 1。
線のスタイル
色: 線の色を変更します。詳細については、「カラーピッカーの説明」をご参照ください。
幅: [+] または [-] 記号をクリックするか、値を入力して線の幅を変更します。
タイプ: 線のタイプ。オプション。有効値: 実線、破線、点線。
透明度: [+] または [-] 記号をクリックするか、値を入力して線の透明度を変更します。有効値: 0 から 1。
エリアスタイル
色: エリアスタイルの色を変更します。詳細については、「カラーピッカーの説明」をご参照ください。
透明度: [+] または [-] 記号をクリックするか、値を入力してエリアの交差の透明度を変更します。値の範囲は 0 から 1 です。
滑らかな曲線: [+] または [-] 記号をクリックするか、値を入力して線の滑らかさを変更します。単位: %。範囲は [0,1] です。
アニメーション: このチェックボックスをオンにすると、アニメーションが有効になります。
アニメーション期間: [+] または [-] 記号をクリックするか、値を入力して初期アニメーションの期間を変更します。単位: ミリ秒。
イージング効果: ドロップダウンリストからデータ更新アニメーションのイージング効果を選択します。デフォルト値は cubicOut です。
[データ] タブ
設定フィールドの説明
パラメーター | 説明 |
| 折れ線グラフの各 x 軸のカテゴリ、つまり x 軸の値を設定するために使用されます。 |
| 折れ線グラフの各ポイントの値を設定するために使用されます。 |
| (オプション) 系列値。[スタイル] パネルの [系列] 設定項目と組み合わせて使用されます。 |
| パラメーター | 説明 |
| 制御モード | スイッチをオンにすると、ウィジェットの初期化時にデータは要求されません。データリクエストは、コールバック ID またはブループリントエディターで設定されたメソッドに基づいてのみトリガーされます。スイッチをオフにすると、データリクエストは自動的にトリガーされます。デフォルトでは、スイッチはオフになっています。 |
| 自動データリクエスト | [自動データリクエスト] チェックボックスをオンにすると、動的ポーリングを有効にし、ポーリング間隔を手動で指定できます。このチェックボックスをオンにしない場合、データは自動的に要求されません。ページを手動でリフレッシュしてデータを要求するか、ブループリントエディターまたはコールバック ID イベントを使用してデータリクエストをトリガーする必要があります。 |
| データソース | Canvas エディターの右側のパネルで、[データ] タブをクリックします。[静的データ] の横にある [設定] をクリックします。[データソースの設定] パネルで、[データソースタイプ] ドロップダウンリストからデータソースを選択します。コードエディターにデータクエリのコードを入力し、[データ応答のプレビュー] をクリックしてデータソースの応答をプレビューし、応答を表示します。詳細については、「アセットデータの設定」をご参照ください。 |
| データフィルター | [データフィルター] チェックボックスをオンにすると、データ構造の変換、データのフィルター、簡単な計算を実行できます。[フィルターの追加] の横にあるプラス記号 (+) をクリックすると、表示されるエディターでデータフィルターのスクリプトを設定できます。詳細については、「データフィルターの使用」をご参照ください。 |
| データ応答結果 | データリクエストへの応答。データソースが変更された場合は、[データ応答結果] の横にある  アイコンをクリックして、データ応答をリアルタイムで表示できます。 |
[インタラクション] タブ
インタラクションの説明
インタラクション | 説明 |
データ項目がクリックされたとき | [有効化] チェックボックスをオンにして、ウィジェット間のインタラクションを有効にします。[24 時間折れ線グラフ] ウィジェットにはインタラクティブな設定があります。データ項目をクリックすると、ウィジェットはコールバック値をスローします。デフォルトでは、データの x フィールドと y フィールドがスローされます。詳細については、「トークンフリップウィジェットのコールバック ID を設定する方法」をご参照ください。 |
凡例がクリックされたとき | [有効化] チェックボックスをオンにして、ウィジェット間のインタラクションを有効にします。[24 時間折れ線グラフ] ウィジェットにはインタラクティブな設定があります。凡例をクリックすると、コールバック値が返されます。デフォルトでは、データの selected フィールドが返されます。詳細については、「ティッカーボードのコールバック ID の設定」をご参照ください。 |
ブループリントエディターでのインタラクションの設定
Canvas エディターで、[レイヤー] パネルのウィジェットを右クリックし、[ブループリントエディターに追加] を選択します。
左上隅にある
アイコンをクリックします。ブループリントエディターで、[ノードのインポート] ペインの [24 時間折れ線グラフ] ウィジェットをクリックします。キャンバス上で、次の図に示すように、24 時間折れ線グラフのパラメーターを設定できます。
イベント
イベント
説明
データインターフェイスリクエストが完了したとき
このイベントは、データインターフェイスリクエストが応答され、フィルターによって処理された後、処理された JSON データでトリガーされます。特定のデータ例の詳細については、キャンバスエディターの右側の設定パネルの [データ] タブの [データ応答結果] セクションをご参照ください。
データインターフェイスリクエストが失敗したとき
データインターフェイスリクエストが失敗したとき (リクエストはネットワークの問題またはインターフェイスのエラーが原因である可能性があります) に返され、フィルターによって処理されるイベント。イベントは、処理された JSON データもスローします。特定のデータ例の詳細については、キャンバスエディターの右側の設定パネルの [データ] タブの [データ応答結果] セクションをご参照ください。
データ項目がクリックされたとき
24 時間折れ線グラフの列がクリックされたときに発生するイベントと、その列に対応するデータ項目。
凡例がクリックされたとき
24 時間折れ線グラフの凡例がクリックされたときに発生するイベントで、列に対応するデータ項目も発生します。
操作
ポリシー操作
説明
データインターフェイスをリクエスト
この操作は、サーバーデータを再度リクエストするために実行されます。アップストリームのデータ処理ノードまたはレイヤーノードから送信されたデータがパラメーターとして使用されます。たとえば、24:00 折れ線グラフが API データソースとして
https://api.testで設定され、[データインターフェイスをリクエスト] に渡されるデータが{ id: '1'}の場合、最終的なリクエストインターフェイスはhttps://api.test?id=1になります。データをインポート
ウィジェットのデータが描画フォーマットに従って処理された後、ウィジェットが再描画のためにインポートされます。サーバーデータを再度リクエストする必要はありません。特定のデータ例の詳細については、キャンバスエディターの右側の設定パネルの [データ] タブの [データ応答結果] セクションをご参照ください。
ハイライト
アクションの入力データはオブジェクトタイプです。パラメーターには、
seriesName(系列名)、seriesIndex(系列インデックス)、dataIndex(データインデックス)、およびname(データ名) が含まれます。サンプルデータ:{ "seriesName": "", "seriesIndex": 1, "dataIndex": 1, "name": "" }ハイライト解除
アクションの入力データはオブジェクトタイプです。パラメーターには、
seriesName(系列名)、seriesIndex(系列インデックス)、dataIndex(データインデックス)、およびname(データ名) が含まれます。サンプルデータ:{ "seriesName": "", "seriesIndex": 1, "dataIndex": 1, "name": "" }ダイアログボックスを表示
アクションの入力データはオブジェクトタイプです。パラメーターには、
dataindex(データインデックス)、name(データ名)、x(x 軸位置)、およびy(y 軸位置) が含まれます。サンプルデータ:{ "dataIndex": 1, "name": "", "x": 1, "y": 1 }ダイアログボックスを非表示
ダイアログボックスを非表示にします。パラメーターは不要です。
凡例コントロール
アクションの入力データはオブジェクトタイプです。パラメーターには、
type(凡例アクションタイプ) とname(凡例名) が含まれます。サンプルデータ:{ "type": "legendToggleSelect", "name": "" }コンポーネント設定の更新
ウィジェットのスタイル設定が動的に更新されます。この操作を実行する前に、Canvas エディターでウィジェットをクリックし、右側のパネルで [設定] タブをクリックし、[設定を...にコピー] をクリックしてウィジェット設定を取得する必要があります。 その後、ブループリントエディターでデータ処理ノードのスタイルフィールドを変更します。
表示
ウィジェットを表示します。次の例は参照データを示しています。
return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }非表示
次の例は、ウィジェットを非表示にする方法を示しています。
return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }暗黙の状態に切り替え
ウィジェットを表示するか非表示にするかを指定します。次の例は参照データを示しています。
return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } }移動
ウィジェットが指定された場所に移動します。参照データの例は次のとおりです。
return{ // The positioning type. to indicates absolute positioning, whereas by indicates relative positioning. The default value is to. "positionType": "to", // The location, which is indicated by the x and y coordinates. "attr": { "x": 0, "y": 0 }, // The animation type. "animation": { "enable": false, // The duration in which animation is displayed. "animationDuration": 1000, // The animation curve, which can be set to linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }