このトピックでは、Echartsカレンダーヒートマップのチャートスタイルと構成パネルについて説明します。
チャートスタイル
設定パネル 
検索設定: [設定] パネルの右上隅にある [検索設定] をクリックします。 [検索設定] パネルで、検索する設定項目の名前を入力して、設定項目をすばやく見つけます。 あいまい一致はサポートされていません。 詳細については、「アセット設定の検索」をご参照ください。
Size: ピクセルの幅と高さを含むウィジェットのサイズを示します。 アイコンをクリックする
と、ウィジェットの縦横比をロックし、ウィジェットの幅と高さを同じ比率で変更できます。 このアイコンをもう一度クリックすると、必要に応じて幅と高さを調整できます。 位置: ウィジェットの位置。ピクセルXとYの座標で示されます。 X座標は、ウィジェットの左上隅とキャンバスの左枠の間のピクセル距離を示します。 Y座標は、ウィジェットの左上隅とキャンバスの上枠の間のピクセル距離を示します。
回転角度: ウィジェットの中心点を回転点として使用する回転の角度。 単位は度 (°) です。 次のいずれかの方法を使用して、ウィジェットの回転角度を制御できます。
回転角度スピンボックスに角度を直接入力するか、プラス記号 ([+]) またはマイナス記号 ([-]) をクリックして、回転角度スピンボックスの値を増減します。
アイコンの
黒い点をドラッグして、ウィジェットの回転角度を制御します。 アイコンをクリックし
て、ウィジェットスタイルを反転します。 アイコンをクリックし
て、ウィジェットスタイルを反転します。
Opacity: 有効な値: 0〜1。 このパラメーターが0に設定されている場合、ウィジェットは非表示になります。 このパラメーターが1に設定されている場合、ウィジェットは完全に表示されます。 デフォルト値: 1
凡例: 右側の目アイコンをクリックして、凡例のスタイルを表示します。
Top: 凡例とウィジェットの上枠の間の距離。 デフォルト値: auto。 次のタイプの入力がサポートされています。
特定のピクセル値は、例えば、20である。
20% など、コンテナの高さと幅に対する割合。
左、中央または右、コンポーネントは対応する位置に従って自動的に整列されます。
Right: 凡例とウィジェットの右枠の間の距離。 デフォルト値: auto。 次のタイプの入力がサポートされています。
特定のピクセル値は、例えば、20である。
20% など、コンテナの高さと幅に対する割合。
左、中央または右、コンポーネントは対応する位置に従って自動的に整列されます。
下: 凡例とウィジェットの下枠の間の距離。 デフォルト値: auto。 次のタイプの入力がサポートされています。
特定のピクセル値は、例えば、20である。
20% など、コンテナの高さと幅に対する割合。
左、中央または右、コンポーネントは対応する位置に従って自動的に整列されます。
Left: 凡例とウィジェットの左枠の間の距離。 デフォルト値: auto。 次のタイプの入力がサポートされています。
特定のピクセル値は、例えば、20である。
20% など、コンテナの高さと幅に対する割合。
左、中央または右、コンポーネントは対応する位置に従って自動的に整列されます。
幅: 凡例の幅を調整する値を入力します。 デフォルト値はautoで、凡例の幅に適合します。
高さ: 凡例の高さを調整する値を入力します。 デフォルト値: auto。
方向: ドロップダウンリストから凡例の方向を選択します。
水平: 凡例の水平方向の分布。
垂直: 凡例は垂直に分散されます。
配置: ドロップダウンリストをクリックして、凡例とテキストの配置方法を選択します。
自動: デフォルトでは、自動はウィジェットの位置と向きに基づいて決定されます。
左揃え: グラフィックがテキストの左側にある場合、左揃えになります。
中央に揃え: 凡例のグラフィックがテキストに重なっている場合は、中央に揃えます。
右揃え: グラフィックがテキストの右側にある場合、右揃えになります。
ピン留め: [+] または [-] 記号をクリックするか数値を入力して、凡例の内側の余白を調整します。 単位: ピクセル。 デフォルトの内側マージンは5です。
要素の間隔: [+] または [-] 記号をクリックするか数値を入力して、凡例の各アイテム間の距離を調整します。 水平レイアウトの水平間隔、垂直レイアウトの垂直間隔。
グラフの幅: [+] または [-] 記号をクリックするか数値を入力して、凡例の幅を調整します。
グラフィックの高さ: [+] または [-] 記号をクリックするか値を入力して、凡例の高さを調整します。
選択モード: 目アイコンをクリックして選択モードを表示します。
オフの色: 凡例がオフのときに凡例の色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。 プレビューまたは公開ページで凡例要素をクリックした場合にのみ、効果を確認できます。
テキストスタイル
色: 凡例のテキストの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: 凡例テキストのフォントスタイル。
フォントの太さ: 凡例テキストのフォントの太さ。
フォント: 凡例テキストのフォントファミリ。
フォントサイズ: [+] または [-] をクリックするか、値を入力して凡例のフォントサイズを変更します。
背景色: 凡例の背景色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
枠の色: 凡例の枠の色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
枠の太さ: [+] または [-] をクリックするか、値を入力して凡例の枠の太さを調整します。
ダイアログボックス: 右側の目アイコンをクリックして、ダイアログボックスを表示します。
トリガー条件: トリガーの種類。 このパラメーターはオプションです。 [マウス移動トリガー] 、[マウスクリックトリガー] 、および [マウス移動とクリックトリガー] を選択できます。
背景色: ダイアログボックスの背景色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
枠の色: ダイアログボックスの枠の色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
枠サイズ: [+] または [-] をクリックするか、値を入力して背景フレームの枠の太さを変更します。
ピン留め: [+] または [-] 記号をクリックするか、手動で数値を入力して背景フレームの内側の余白を変更します。 単位: ピクセル。 デフォルトの内側マージンは5です。
テキストスタイル
色: ダイアログボックスのテキストの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: テキストのフォントスタイルを表示します。
フォントの太さ: テキストのフォントの太さを表示します。
フォント: テキストのフォントファミリを表示します。
フォントサイズ: テキストのフォントサイズを表示します。
カレンダー
Left: カレンダー領域とウィジェットの左枠の間の距離。 デフォルト値: 80 次のタイプの入力がサポートされています。
特定のピクセル値は、例えば、20である。
20% など、コンテナの高さと幅に対する割合。
左、中央または右、コンポーネントは対応する位置に従って自動的に整列されます。
上: カレンダーエリアとウィジェットの上枠の間の距離。 デフォルト値: 100 次のタイプの入力がサポートされています。
特定のピクセル値は、例えば、20である。
20% など、コンテナの高さと幅に対する割合。
左、中央または右、コンポーネントは対応する位置に従って自動的に整列されます。
Right: カレンダー領域とウィジェットの右枠の間の距離。 デフォルト値: 50 次のタイプの入力がサポートされています。
特定のピクセル値は、例えば、20である。
20% など、コンテナの高さと幅に対する割合。
左、中央または右、コンポーネントは対応する位置に従って自動的に整列されます。
下: カレンダーエリアとウィジェットの下枠の間の距離。 デフォルト値: 60 次のタイプの入力がサポートされています。
特定のピクセル値は、例えば、20である。
20% など、コンテナの高さと幅に対する割合。
左、中央または右、コンポーネントは対応する位置に従って自動的に整列されます。
開始日: カレンダー座標の開始日。 カレンダー座標の範囲を終了日とともに定義します。 値は、1年 (2022) 、1か月 (2022-08) 、または1日 (2022-08-01) です。
終了日: カレンダー座標の終了日。 終了日と開始日は、カレンダー座標の範囲を定義します。 値は、1年 (2022) 、1か月 (2022-08) 、または1日 (2022-08-01) です。
カレンダーサイズ: カレンダーの各フレームのサイズ。 デフォルト値は20です。
Orientation: カレンダー座標レイアウトの向き。 このパラメーターはオプションで、[水平] と [垂直] が含まれます。
行セパレータ: 右側の目アイコンをクリックして、カレンダー座標の行セパレータを表示します。
軸スタイル
色: カラーピッカーの説明を参照して、線区切り軸の色を変更します。
幅: [+] または [-] 記号をクリックするか値を入力して、線区切り軸の幅を変更します。
Type: 行区切り軸のタイプ。 オプションです。 有効な値は実線と破線である。
不透明度: [+] または [-] 記号をクリックするか値を入力して、線区切り軸の透明度を変更します。 範囲は [0,1] です。
要素スタイル
普通のアイテム
色: カラーピッカーの説明を参照して、共通要素の背景色を変更します。
枠の色: 共通アイテム要素の枠の色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
枠の幅: [+] または [-] 記号をクリックするか値を入力して、通常の要素の枠の太さを変更します。
ボーダースタイル: ボーダーに使用するストロークのタイプ。 貴重な値には、SolidとDottedが含まれます。 デフォルト値: Solid。
透明度: [+] または [-] 記号をクリックするか値を入力して、通常の要素の透明度を変更します。 値の範囲は0から1です。
週ラベル
開始週: 週は曜日から始まります。 デフォルトでは、週は日曜日から始まります。
Outer Spacing: 日ラベルと軸の間の距離。
リージョンマッピング: 曜日。 デフォルト値は英語です。 ドロップダウンリストをクリックすると、中国語に切り替えることができます。
テキストスタイル
色: 週ラベルのテキストの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: 週ラベルのフォントスタイル。
フォントの太さ: 週ラベルのフォントの太さ。
フォント: 週ラベルテキストのフォントファミリ。
フォントサイズ: 週ラベルのフォントサイズ。
月ラベル
配置: テキストの水平方向の配置 (自動、左、中央、および右) 。 デフォルト値: 自動。
Outer Spacing: 月ラベルと軸の間の距離。
リージョンマッピング: 月ごとの効果。 デフォルト値は英語です。 ドロップダウンリストをクリックすると、中国語に切り替えることができます。
テキストスタイル
色: 月ラベルテキストの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: 月ラベルのフォントスタイル。
フォントの太さ: 月ラベルのフォントの太さ。
フォント: 月ラベルテキストのフォントファミリ。
フォントサイズ: 月ラベルテキストのフォントサイズ。
年ラベル
Outer Spacing: 年ラベルと軸の間の距離。
テキストスタイル
色: 年ラベルテキストの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: 年ラベルのフォントスタイル。
フォントの太さ: 年ラベルテキストのフォントの太さ。
フォント: 年ラベルテキストのフォントファミリ。
フォントサイズ: 年ラベルテキストのフォントサイズ。
静的: このオプションを選択すると、軸が静的である場合、軸を操作することはできません。
シリーズ:
または
アイコンをクリックして、条件付きスタイルを追加または削除します。 
または
アイコンをクリックして、複数の条件付きスタイルの配置スタイルを設定します。 アイコンをクリックし
て、選択した条件付きスタイル設定をコピーし、同じ設定の条件付きスタイルを追加します。 
Type: データの表示タイプ。 このパラメーターはオプションです。 デフォルト値は、scatter (散布タイプ) またはeffectScatter (リップル効果を持つ散布) です。
名前: カスタムシリーズの名前。 データ内のsフィールド値と一緒に使用する必要があります。
ホバーアニメーション: このオプションを選択すると、ホバースイッチが有効になっているときにアニメーション効果が表示されます。
凡例インタラクションのハイライト: このチェックボックスをオンにすると、凡例のホバーが開始されるとインタラクションがハイライトされます。
マーカーグラフィック: オプション。 デフォルト値: circle。 タグの種類には、circle、rect、roundRect、triangle、diamond、pin、arrow、noneなどがあり、URLまたは写真のパスとして設定することもできます。
印のサイズ:
値のマッピング: このチェックボックスをオンにすると、DataVはデータ値のサイズに基づいてタグのサイズをマッピングします。 このチェックボックスは、タグのサイズを調整するために値のスケーリング比と一緒に使用されます。 タグのサイズは値によって異なります。 チェックボックスをオフにすると、すべてのタグのサイズが同じになり、デフォルトサイズで設定できます。
[値のスケーリング比率]: [値のマッピング] を選択すると、タグサイズのスケーリング比率を設定できます。
回転角度: [+] または [-] 記号をクリックするか値を入力して、マーカーの回転角度を変更します。
静的: このチェックボックスをオンにすると、シリーズは応答せず、マウスイベントをトリガーします。
ラベル
通常のアイテム: 右側の目アイコンをクリックして、通常のアイテム (マウスイベントに反応しないポイント) のラベルテキストを表示します。
テキストスタイル
色: 共通アイテムのラベルテキストの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: ラベルテキストのフォントスタイル。
フォントの太さ: ラベルテキストのフォントの太さ。
フォント: ラベルテキストのフォントファミリ。
フォントサイズ: ラベルテキストのフォントサイズ。
キーアイテム: 右側の目アイコンをクリックして、キーアイテム (マウスイベントに応答するポイント) のラベルテキストを表示します。
テキストスタイル
色: メジャーアイテムのラベルテキストの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: キーアイテムラベルのフォントスタイル。
フォントの太さ: ハイライトラベルテキストのフォントの太さ。
フォント: ハイライトラベルテキストのフォントファミリ。
フォントサイズ: キーアイテムラベルのフォントサイズ。
要素スタイル
普通のアイテム
色: カラーピッカーの説明を参照して、共通要素の背景色を変更します。
枠の色: 共通アイテム要素の枠の色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
枠サイズ: [+] または [-] 記号をクリックするか値を入力して、通常の要素の枠サイズを変更します。
ボーダースタイル: ボーダーに使用するストロークのタイプ。 タイプはSolidまたはDottedです。 デフォルト値: Solid。
透明度: [+] または [-] 記号をクリックするか値を入力して、通常の要素の透明度を変更します。 値の範囲は0から1です。
主なアイテム
色: カラーピッカーの説明を参照して、ハイライト要素の背景色を変更します。
枠の色: メジャーアイテム要素の枠の色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
枠の幅: [+] または [-] をクリックするか、手動で値を入力して、キー要素の枠の太さを変更します。
ボーダースタイル: ボーダーのタイプ。 有効な値: SolidおよびDotted。 デフォルト値: Solid。
透明度: [+] または [-] 記号をクリックするか値を入力して、通常の要素の透明度を変更します。 有効な値は 0～1 です。
[データ] タブ
設定フィールドの説明
列 | 説明 |
| カレンダーチャートの各ポイントのカテゴリ、つまりポイントの名前を設定するために使用します。 |
| カレンダーチャートの各ポイントの値を設定するために使用します。 |
| (オプション) シリーズの値。スタイルパネルのシリーズ構成項目と組み合わせて使用されます。 |
[インタラクション] タブ
説明
インタラクション | 説明 |
データ項目がクリックされたとき | ウィジェット操作機能を有効にするには、[有効化] を選択します。 calendar heatmapコンポーネントは、対話型構成を有する。 クリックしてデータ項目を選択すると、コールバック値が返されます。 デフォルトでは、データのnameフィールドとvalueフィールドが返されます。 詳細は、「コールバックIDの設定」をご参照ください。 |
凡例がクリックされたとき | ウィジェット操作機能を有効にするには、[有効化] を選択します。 calendar heatmapコンポーネントはインタラクティブな設定をしています。 凡例をクリックすると、コールバック値が返されます。 デフォルトでは、データ内の選択されたフィールドが返されます。 詳細は、「コールバックIDの設定」をご参照ください。 |
Blueprint Editorでのインタラクションの設定
Canvas Editorでウィジェットを右クリックし、[Blueprint Editorにエクスポート] を選択します。
左上隅の
アイコンをクリックします。 Blueprint Editorで、[追加されたノード] ペインで [calendar heatmap] をクリックします。 次の図に示すように、キャンバスでカレンダーヒートマップパラメータを表示できます。
Events
イベント
説明
データインターフェイス要求が完了したとき
イベントは、データインターフェイス要求が応答され、フィルターによって処理された後、処理されたJSONデータでトリガーされます。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。
データインターフェイス要求が失敗した場合
データインターフェイス要求が失敗したときに返され (ネットワークの問題やインターフェイスのエラーなど) 、フィルターによって処理されるイベント。 イベントは、処理されたJSONデータもスローします。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。
データ項目がクリックされたとき
カレンダーヒートマップポイントがクリックされたときに発生するイベントと、そのポイントに対応するデータ項目。
凡例がクリックされたとき
カレンダーヒートマップの凡例がクリックされたときに発生するイベントと、凡例に対応するデータ項目。
action
Action
説明
要求データインタフェース
このアクションは、サーバーデータを再度要求するために実行されます。 アップストリームデータ処理ノードまたはレイヤノードによって送信されたデータは、パラメータとして使用される。 たとえば、APIデータソースが
https:// api.testであり、リクエストデータインターフェイスに転送されるデータが{ id: '1'}である場合、最終的なリクエストインターフェイスはhttps:// api.test?id=1です。データのインポート
ウィジェットのデータがその描画フォーマットに従って処理された後、ウィジェットは再描画のためにインポートされる。 サーバーデータを再度リクエストする必要はありません。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。
ハイライト
アクションの入力データはオブジェクトタイプです。 パラメーターには、
seriesName(シリーズ名) 、seriesIndex(シリーズインデックス) 、dataIndex(データインデックス) 、およびname(データ名) が含まれます。 Sample data:{ "seriesName": "" 、 "seriesIndex": 1、 "dataIndex": 1、 "name": "" }ハイライト解除
アクションの入力データはオブジェクトタイプです。 パラメーターには、
seriesName(シリーズ名) 、seriesIndex(シリーズインデックス) 、dataIndex(データインデックス) 、およびname(データ名) が含まれます。 Sample data:{ "seriesName": "" 、 "seriesIndex": 1、 "dataIndex": 1、 "name": "" }表示ダイアログボックス
アクションの入力データはオブジェクトタイプです。 パラメータは、
dataindex(データインデックス) 、name(データ名) 、x(x軸位置) 、およびy(y軸位置) を含む。 Sample data:{ "dataIndex": 1、 "name": "" 、 "x": 1, "y": 1 }[非表示] ダイアログボックス
ダイアログボックスを非表示にします。パラメータは必要ありません。
凡例コントロール
アクションの入力データはオブジェクトタイプです。 パラメーターには、
type(凡例アクションタイプ) とname(凡例名) が含まれます。 Sample data:{ "type": "legendToggleSelect", "name": "" }コンポーネント設定の更新
ウィジェットのスタイル設定は動的に更新されます。 [設定] パネルで、[設定をクリップボードにコピー] をクリックして、コンポーネントの設定データを取得します。 その後、Blueprint Editorでデータ処理ノードのスタイルフィールドを変更します。
表示
ウィジェットの例を次に示します。
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" } }