チャート要素の強調表示
Charts 埋め込み JavaScript SDK を使用すると、埋め込みチャートや 埋め込みダッシュボード 内のチャートで特定の要素と を クリックしたイベント をプログラムで強調表示できます。
前提条件
始める前に、バージョン 2.1.0 をインストールしてください またはそれ以降の Charts埋め込み JavaScript SDK 。
構文
強調表示を有効にするための Charts 埋め込み JavaScript SDK メソッドの構文は次のとおりです。
charts.setHighlight(selectionFilter);
注意
埋め込みダッシュボード内のチャートを強調表示する場合は、まず次のメソッドを実行して、ダッシュボードのインスタンスから特定のチャートを取得します。
dashboard.getChart('<chartID>');
setHighlightメソッドは MQLフィルター を受け取ります。 以下の例に示すように、 setHighlightメソッドに直接、またはクリック イベント ペイロードselectionFilterを通じて MQL フィルターを指定して、特定の要素とクリック イベントを強調表示できます。
例
chart.setHighlight( { city: { $nin: ['New York', 'London', 'Paris'] } } )
selectionFilterは、チャートのカテゴリまたはシリーズ チャンネルで使用される値と一致する必要があります。
Charts 埋め込み JavaScript SDK には、ハイライト クエリを取得するためのhighlightオプションも含まれています。
const highlight = chart.getHighlight();
オプションは、 MQLフィルターを表す オブジェクトのパラメーターを受け取ります。highlightJavaScriptグラフを作成するとき、またはグラフがレンダリングされた後にhighlightオプションを設定できます。
次のクエリ要素を含めることができます。
サポートされているすべてのチャート タイプ との $eq（等価） 一致。
折れ線チャートと面Charts 、 縦棒チャートと横棒Charts 、および非 ジオメトリ ヒートマップ の $nin チェック。
$gte と $lt は、 折れ線チャートと面Charts 、 縦棒チャートと横棒Charts 、および非ジオメトリ ヒートマップ の指定された範囲内の数値または日付バイナリを照合するために使用されます 。
連続した 折れ線 チャート と 面チャートCharts の X 軸上のオープン範囲の $gt 、 $gte 、 $lt 、$lte の任意の組み合わせ
チャートの種類
次のチャート タイプは、プログラムによる強調表示をサポートしています。