IgrDataChart – IgrBubbleSeriesでバブルごとのカスタムツールチップを表示するには

  • 公開日:
  • 最終更新日:

IgrDataChartのバブルシリーズでバブルごとに異なる内容のカスタムツールチップを表示したい場合は、IgrBubbleSeriesのtooltipTemplateプロパティを使用します。

IgrBubbleSeries の設定

バブルシリーズを表示するIgrBubbleSeriesを、X軸・Y軸となるIgrNumericXAxis・IgrNumericYAxisとともに配置します。

<IgrDataChart>
  <IgrNumericXAxis name="xAxis" title="一人当たりGDP（ドル）"></IgrNumericXAxis>
  <IgrNumericYAxis name="yAxis" title="平均寿命（年）" minimumValue={60} maximumValue={90}></IgrNumericYAxis>
  <IgrBubbleSeries
    name="bubbleSeries1"
    dataSource={bubbleData}
    xMemberPath="gdpPerCapita"
    yMemberPath="lifeExpectancy"
    radiusMemberPath="population"
    xAxisName="xAxis"
    yAxisName="yAxis">
  </IgrBubbleSeries>
</IgrDataChart>

tooltipTemplate の使用

IgrBubbleSeriesのtooltipTemplateプロパティに、IChartTooltipPropsを受け取る関数を設定すると、その戻り値の内容でツールチップが描画されます。関数内ではprops.dataContext.itemからホバー中のバブルのデータを取得し、任意のレイアウトのJSXを返すことができます。

const createBubbleTooltipTemplate = (props: IChartTooltipProps) => {
  if (!props.dataContext) return null;
  const dataItem = props.dataContext.item as BubblePoint;
  if (!dataItem) return null;

  return (
    <div className="ui-chart-default-tooltip-content" style={{ whiteSpace: 'nowrap' }}>
      <div style={{ fontWeight: 'bold', color: props.dataContext.series.actualBrush }}>{dataItem.country}</div>
      <div>一人当たりGDP: {dataItem.gdpPerCapita.toLocaleString()} (ドル)</div>
      <div>平均寿命: {dataItem.lifeExpectancy} (年)</div>
      <div>人口: {dataItem.population} (百万人)</div>
    </div>
  );
}

作成した関数は、IgrBubbleSeriesのtooltipTemplateプロパティに渡します。showDefaultTooltipをtrueのままにしておくと、ツールチップの表示・非表示の制御自体はデフォルトの挙動を保ちつつ、内容だけがtooltipTemplateの戻り値に差し替わります。

<IgrBubbleSeries
  name="bubbleSeries1"
  dataSource={bubbleData}
  xMemberPath="gdpPerCapita"
  yMemberPath="lifeExpectancy"
  radiusMemberPath="population"
  xAxisName="xAxis"
  yAxisName="yAxis"
  showDefaultTooltip={true}
  tooltipTemplate={createBubbleTooltipTemplate}>
</IgrBubbleSeries>

実行結果

バブルにマウスホバーすると、そのバブルの位置にのみ、tooltipTemplateで定義した内容のツールチップが表示されます。IgrDataToolTipLayerと異なり、プロットエリア内の別の場所にカーソルがある間はホバー対象外のバブルのツールチップが表示されることはなく、ツールチップの内容も自由にカスタマイズできます。

サンプルプログラムのダウンロード GitHub リポジトリはこちら
Tagged: