このトピックでは、ワードクラウドのチャートスタイルと構成パネルについて説明します。
チャートスタイル
ワードクラウドは、視覚化アプリケーションにおいて大量のテキストをワードクラウドの形式で表示することができるテキストコンポーネントの一種である。 ワードクラウドを使用すると、テキストの内容、色、描画形状をカスタマイズできます。 複数の一連の色を設定し、重み値に基づいてテキストサイズをマッピングできます。

設定パネル 
[設定の検索]: キャンバスエディターの右側のパネルで、[設定] タブをクリックし、右上隅の [設定の検索] をクリックします。 検索ボックスに必要な設定項目を入力し、検索アイコンをクリックして設定項目をすばやく見つけます。 あいまい一致はサポートされていません。 詳細については、「」をご参照ください。
Size: ピクセルの幅と高さを含むウィジェットのサイズを示します。 アイコンをクリックする
と、ウィジェットの幅と高さを比例調整できます。 このアイコンをもう一度クリックすると、必要に応じて幅と高さを調整できます。位置: ウィジェットの位置。ピクセルXとYの座標で示されます。 X座標は、ウィジェットの左上隅とキャンバスの左枠の間のピクセル距離を示します。 Y座標は、ウィジェットの左上隅とキャンバスの上枠の間のピクセル距離を示します。
回転角度: ウィジェットの中心点を回転点として使用する回転の角度。 単位は度 (°) です。 次のいずれかの方法を使用して、ウィジェットの回転角度を制御できます。
回転角度スピンボックスに角度を直接入力するか、プラス記号 ([+]) またはマイナス記号 ([-]) をクリックして、回転角度スピンボックスの値を増減します。
アイコンの黒い点を
ドラッグします。アイコンをクリックして、
ウィジェットを水平に反転します。アイコンをクリックして、
ウィジェットを垂直に反転します。
不透明度: ウィジェットの不透明度。 有効な値: 0と1。 このパラメーターが0に設定されている場合、ウィジェットは非表示になります。 このパラメーターが1に設定されている場合、ウィジェットは完全に表示されます。 デフォルト値: 1
グローバルスタイル

パラメーター
説明
フォント
ウィジェット内のすべてのテキストのフォントファミリ。 デフォルト値: Microsoft Yahei
フォントの重み
ウィジェット内のすべてのテキストのフォントの重みスタイル選択。
回転
ウィジェット内のテキストの回転スタイル。 [自動] 、[水平] 、または [垂直] を選択できます。
最大フォントサイズ
ウィジェット内のテキストの最大フォントサイズ。データ内のvalue値の最大テキストサイズを定義します。
最小フォントサイズ
ウィジェット内のテキストの最小フォントサイズ。データ内の最小値の値を持つテキストのサイズを定義します。
図形を描く
アイコンをクリックし
て開くと、画像に表示されている図形にエントリが均等に表示されます。 シェイプイメージ: 点線ボックスの上にポインターを移動し、[削除] をクリックしてデフォルトイメージを削除します。 既存の画像を破線のボックスにドラッグして、ローカル画像を追加することもできます。 画像のURLを破線のボックスにコピーして、リモートサーバーに画像を追加することもできます。
重要白い画像を使用することを推奨します。
シリーズ:
または
アイコンをクリックして、シリーズを追加または削除します。
または
アイコンをクリックして、複数のデータ系列の配置スタイルを設定します。 、
アイコンをクリックして、選択したデータ系列設定をコピーし、同じ設定のデータ系列を追加します。 シリーズの色: シリーズ内のテキストの色。
ダイアログボックス: プレビューページまたは公開ページでポインタを移動したり単語をクリックしたりして、アイコンをクリックし
てダイアログボックスの外観と隠蔽を制御したときに表示されるダイアログボックスのスタイル。 補助線: スイッチをオンにすると、補助線がダイアログボックスに表示されます。スイッチをオフにすると、補助線は表示されません。

データパネル

設定フィールドの説明
パラメーター | 説明 |
name | ワードクラウドコンポーネントのテキストコンテンツ。 |
値 | ワードクラウドコンポーネントの重み値は、レイアウトのフォントサイズに影響を与える可能性があります。 |
タイプ | Word Cloudコンポーネントのテキストが属するシリーズ。コンフィギュレーションパネルのシリーズと一致します。 異なるシリーズのテキストの色が制御されます。 |
表1. パラメーター
パラメーター | 説明 |
制御モード | スイッチをオンにすると、ウィジェットの初期化時にデータが要求されません。 データリクエストは、コールバックIDまたはBlueprint Editorで設定されたメソッドに基づいてのみトリガーされます。 スイッチをオフにすると、データ要求が自動的にトリガーされます。 デフォルトでは、スイッチはオフになっています。 |
自動データ要求 | [自動データ要求] チェックボックスをオンにすると、動的ポーリングを有効にし、ポーリング間隔を手動で指定できます。 このチェックボックスをオンにしないと、データは自動的に要求されません。 手動でページを更新してデータを要求するか、Blueprint EditorまたはコールバックIDイベントを使用してデータ要求をトリガーする必要があります。 |
データソース | キャンバスエディターの右側のパネルで、[データ] タブをクリックします。 [静的データ] の横にある [設定] をクリックします。 [Configure Datasource] パネルで、[data source Type] ドロップダウンリストからデータソースを選択します。 コードエディターでデータクエリのコードを入力し、[データ応答のプレビュー] をクリックしてデータソースの応答をプレビューし、応答を表示します。 詳細については、「ウィジェットデータの設定」をご参照ください。 |
データフィルター | [データフィルタ] チェックボックスをオンにすると、データ構造の変換、データのフィルタリング、および簡単な計算を実行できます。 [フィルターの追加] の横にあるプラス記号 (+) をクリックすると、表示されるエディターでデータフィルターのスクリプトを設定できます。 詳細については、「」をご参照ください。 |
データ応答結果 | データ要求に対する応答。 データソースが変更された場合は、[データ応答結果] の横にある |
相互作用パネル
このウィジェットはインタラクションイベントをサポートしていません。
Blueprint Editorでのインタラクションの設定
キャンバスエディターで、レイヤーパネルでウィジェットを右クリックし、[ブループリントエディターに追加] を選択します。
ページの
左上隅にあるアイコンをクリックします。ブループリントエディターで、[追加ノード] ペインで [Word Cloud] コンポーネントをクリックします。 キャンバスでは、次の図に示すように、ワードクラウドパラメータを設定できます。

イベント
イベント
説明
データインターフェイス要求が完了したとき
イベントは、データインターフェイス要求が応答され、フィルターによって処理された後、処理されたJSONデータでトリガーされます。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。
データインターフェイス要求が失敗した場合
データインターフェイス要求が失敗したときに返され (要求はネットワークの問題またはインターフェイスのエラーが原因である可能性があります) 、フィルターによって処理されるイベント。 イベントは、処理されたJSONデータもスローします。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。
Action
ポリシーアクション
説明
要求データインタフェース
このアクションは、サーバーデータを再度要求するために実行されます。 アップストリームデータ処理ノードまたはレイヤノードによって送信されたデータは、パラメータとして使用される。 たとえば、APIデータソースが
https:// api.testで、リクエストデータインターフェイスに渡されるデータが{ id: '1'}の場合、最終的なリクエストインターフェイスはhttps:// api.test?id=1です。データのインポート
ウィジェットのデータがその描画フォーマットに従って処理された後、ウィジェットは再描画のためにインポートされる。 サーバーデータを再度リクエストする必要はありません。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。
コンポーネント設定の更新
ウィジェットのスタイル設定は動的に更新されます。 [設定] パネルで、[設定をクリップボードにコピー] をクリックして、コンポーネントの設定データを取得します。 その後、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" } }