SeriesTooltip

• 名稱：Series Tooltip（Series類別提示框）

• 說明：Series資料類別使用的提示框(tooltip)

• Playground 範例

params$

• 型別：Partial<SeriesTooltipParams>

• 欄位：

  名稱	說明	型別
  backgroundColorType	底色顏色類別	ColorType
  backgroundOpacity	底色透明度	number
  strokeColorType	外框顏色類別	ColorType
  textColorType	文字顏色類別	ColorType
  offset	滑鼠游標相對位置 (x, y)	[number, number]
  padding	內部間距	number
  renderFn	渲染函式，函式可回傳三種格式： (1) 純文字字串 (string) (2) 以陣列字串顯示多行純文字 (string[]) (3) SVG標籤內容字串 (string)	(eventData: EventSeries, context: { styles: BaseTooltipStyle; utils: BaseTooltipUtils }) => string[] | string

詳細型別

type ColorType = 'none' | 'label' | 'labelContrast' | 'primary' | 'secondary' | 'background'

interface BaseTooltipStyle {
  backgroundColor: string
  backgroundOpacity: number
  strokeColor: string
  offset: [number, number]
  padding: number
  textColor: string
  textSize: number | string // chartParams上的設定
  textSizePx: number
  seriesColors: string[]
}

interface BaseTooltipUtils {
  toCurrency: (num: number | null) => string
  measureTextWidth (text: string, size?: number): number
}

• 預設值：

{
  backgroundColorType: 'background',
  strokeColorType: 'primary',
  backgroundOpacity: 0.8,
  textColorType: 'primary',
  offset: [20, 5],
  padding: 10,
  renderFn: (eventData, { styles, utils }) => {
    const hasSeriesLabel = eventData.seriesLabel.slice(0, 7) === 'series_' ? false : true
    const hasDatumLabel = eventData.datum.label.slice(0, 7) === 'series_' ? false : true
    const valueText = utils.toCurrency(eventData.datum.value)
    const bulletWidth = styles.textSizePx * 0.7
    const offset = (styles.textSizePx / 2) - (bulletWidth / 2)
    const seriesSvg = hasSeriesLabel
      ? `<rect width="${bulletWidth}" height="${bulletWidth}" x="${offset}" y="${offset - 1}" rx="${bulletWidth / 2}" fill="${eventData.datum.color}"></rect>
  <text x="${styles.textSizePx * 1.5}" font-size="${styles.textSizePx}" dominant-baseline="hanging" fill="${styles.textColor}">
    <tspan>${eventData.seriesLabel}</tspan>
  </text>`
      : ''
    const datumLabelSvg = hasDatumLabel
      ? `<tspan>${eventData.datum.label}</tspan>  `
      : ''
    const seriesLabelTextWidth = hasSeriesLabel
      ? utils.measureTextWidth(`${eventData.seriesLabel}${valueText}`, styles.textSizePx) + styles.textSizePx * 1.5
      : 0
    const datumLabelTextWidth = hasDatumLabel
      ? utils.measureTextWidth(`${eventData.datum.label}${valueText}`, styles.textSizePx)
      : 0
    const maxTextWidth = Math.max(seriesLabelTextWidth, datumLabelTextWidth)
    const lineEndX = hasDatumLabel
      ? maxTextWidth + styles.textSizePx * 1.5
      : 0
    const valueTextAnchor = hasDatumLabel ? 'end' : 'start'
    const datumSvg = `<text font-size="${styles.textSizePx}" dominant-baseline="hanging" fill="${styles.textColor}">
    ${datumLabelSvg}<tspan font-weight="bold" text-anchor="${valueTextAnchor}" x="${lineEndX}">${valueText}</tspan>
  </text>`

    return `${seriesSvg}
  <g ${hasSeriesLabel ? `transform="translate(0, ${styles.textSizePx * 2})"` : ''}>
    ${datumSvg}
  </g>`
  },
}