チャート要素の強調表示

前提条件

始める前に、バージョン 2.1.0 をインストールしてください またはそれ以降の Charts埋め込み JavaScript SDK 。

構文

強調表示を有効にするための Charts 埋め込み JavaScript SDK メソッドの構文は次のとおりです。

charts.setHighlight(selectionFilter);

dashboard.getChart('<chartID>');

setHighlightメソッドはフィルターを取ります。以下の例に示すように、MQLフィルターをsetHighlightメソッドに直接提供するか、クリックイベントペイロードselectionFilter を介して特定の要素とクリックイベントを強調表示することができます。

chart.setHighlight(
  {
    city: { $nin: ['New York', 'London', 'Paris'] }
  }
)

selectionFilterは、チャートのカテゴリまたはシリーズ チャンネルで使用される値と一致する必要があります。

Charts 埋め込み JavaScript SDK には、ハイライト クエリを取得するためのhighlightオプションも含まれています。

const highlight = chart.getHighlight();

highlightオプションは、フィルターを表す JavaScript オブジェクトのパラメーターを受け取ります。チャートを作成するとき、またはチャートのレンダー後にhighlightオプションを設定できます。

次のクエリ要素を含めることができます。

• $eq (equality)サポートされているすべてのチャート タイプとの 一致。

• $inサポートされているすべてのチャート タイプ の 。

• $nin折れ線チャートと面Charts 、 縦棒チャートと横棒Charts 、および非 ジオメトリ ヒートマップ の チェック。

• $gte と $lt は、Line and Area Charts、Column and Bar Charts、および非地理的なHeatmapの指定された範囲内の数値または日付バイナリを照合するために閉区間を設定します。

• 連続した Line and Area Charts の$gt X 軸上のオープン範囲の 、$lte$gte 、$lt 、 の任意の組み合わせ

チャートの種類

次のチャート タイプは、プログラムによる強調表示をサポートしています。

• バッチ チャート
• 縦棒チャートと横棒チャート
• テーブル
• ドーナツチャート
• 折れ線チャートと面チャート

• Non-geo Heatmap