Echart

Echartウィジェットは、EChartsベースのインタラクティブなチャートを描画するウィジェットです。
棒・線・円などさまざまなチャートをオプション（JSON）で定義し、データを変数にバインディングして表示します。

定義・役割

Echartウィジェットは、内部のWebViewにEChartsを読み込んでチャートをレンダリングします。チャートの見た目はEChartsのオプション（JSON）で定義し、データ項目は変数リストにバインディングして埋めます。実行中はスクリプトでオプション・データ・アクションを更新できます。

• カテゴリー：Contents
• デフォルトサイズ：幅300／高さ200
• デフォルトのレンダラー：canvas（オプションでSVG）
• 編集（デザイン）モードでは実際のチャートの代わりにEchartラベルの付いたプレースホルダー領域が表示され、アプリ実行時にチャートが描画されます。

機能

機能	説明
チャートのレンダリング	EChartsのオプション（JSON）で定義したチャートを描画します。
データバインディング	オプションテンプレートの変数の位置にデータ（リスト・単一値）をバインディングして埋めます。
レンダラーの選択	canvasまたはSVGレンダラーを選択します。
背景色	チャートの背景色を設定します。
読み込み表示	チャートの読み込み中にローディングインジケーターを表示するかどうかを設定します。
スクリプト制御	実行中にスクリプトでオプション・データを更新し、チャートのアクションを渡します。

使い方

1. 左側のウィジェットパレットでContentsカテゴリーを開きます。
2. Echart項目をキャンバスにドラッグ＆ドロップします。
3. 右側のプロパティパネルでEchart Data（オプションテンプレート・データ変数）を設定します。
4. 必要に応じて背景色（bgColor）・レンダラー（useSvgRenderer）・読み込み表示（showLoadingBar）などを調整します。

プロパティ

プロパティ	説明	デフォルト値	値 / タイプ
bgColor	チャートの背景色	未設定	カラー
Echart Data	チャートのオプションテンプレート（JSON）とデータ変数のリスト	空のオプション（変数なし）	チャートデータ
showLoadingBar	チャートの読み込み中にローディングインジケーターを表示するかどうか	false	true / false
useSvgRenderer	SVGレンダラーを使用するかどうか（オフの場合はcanvas）	false	true / false
embedInParentScroll	親スクロールにマウスホイールイベントを渡すかどうか（macOS）	true	true / false

注意・ヒント

注記

編集（デザイン）モードではEchartラベルのプレースホルダーのみが表示され、実際のチャートはアプリ実行時にレンダリングされます。

ヒント

canvasのレンダリングに問題がある場合は、useSvgRendererをオンにしてSVGレンダラーに切り替えられます。実行中はスクリプトでオプション・データを更新し、チャートを再描画できます。

さらに詳しく

ヒント

このウィジェットをスクリプトで制御するWidget Control（Property・Method・Event）の全体は、Echart Widget Controlをご覧ください。