建立网站就是制作网页吗,海口市住房与城乡建设厅网站,网页制作步骤图,山西免费网站制作前言
当我们结合 React 使用 highCharts 库时#xff0c;存在一些特殊自定义的情况#xff0c;比如针对 Tooltip 定制化样式。当然 highCharts 也提供了配置自定义 tooltip 的 formatter 方法#xff0c;可以支持 html 元素。但是并不够灵活#xff0c;对于配置复杂样式或…前言
当我们结合 React 使用 highCharts 库时存在一些特殊自定义的情况比如针对 Tooltip 定制化样式。当然 highCharts 也提供了配置自定义 tooltip 的 formatter 方法可以支持 html 元素。但是并不够灵活对于配置复杂样式或组件复用情况下并不友好。因此寻求新的思路以下便是社区常用的一个方法在此记录。
实现
Tooltip 组件封装
import {Chart,TooltipFormatterCallbackFunction,TooltipFormatterContextObject,
} from highcharts;
import { useEffect, useRef, useState } from react;
import ReactDOM from react-dom;const generateTooltipId (chartId: number) highcharts-custom-tooltip-${chartId};interface Props {chart: Chart | null;children(formatterContext: TooltipFormatterContextObject): JSX.Element;
}export const Tooltip ({ chart, children }: Props) {const isInit useRef(false);const [context, setContext] useStateTooltipFormatterContextObject | null(null);useEffect(() {if (chart) {const formatter: TooltipFormatterCallbackFunction function () {// Ensures that tooltip DOM container is rendered before React portal is created.if (!isInit.current) {isInit.current true;setTimeout(() {chart.tooltip.refresh.apply(chart.tooltip, [this.points ? this.points.map(({ point }) point) : this.point,]);chart.tooltip.hide(0);});}setContext(this);return div id${generateTooltipId(chart.index)}/div;};chart.update({tooltip: {formatter,useHTML: true,},});}}, [chart]);const node chart document.getElementById(generateTooltipId(chart.index));return node context? ReactDOM.createPortal(children(context), node): null;
};
调用方式
import React, { useState, useCallback } from react;
import Highcharts, { Chart as HighchartsChart } from highcharts;
import HighchartsReact from highcharts-react-official;
import { Tooltip } from ./Tooltip;const options {title: {text: Custom tooltip as React component},series: [{type: line,data: [1, 22424242424, 3, 4, 5, 123123132]}],tooltip: {useHTML: true}
};export const Chart () {const [chart, setChart] useStateHighchartsChart | null(null);const callback useCallback((chart: HighchartsChart) {setChart(chart);}, []);return (HighchartsReacthighcharts{Highcharts}options{options}callback{callback}/Tooltip chart{chart}{(formatterContext) {const { x, y } formatterContext;return (divx: {x}/divdivy: {y}/divbr /button onClick{() alert(x: ${x}, y: ${y})}Action/button/);}}/Tooltip/);
};
formatterContext 里包含以下常用的字段
{pointspointseriesxy
}这些字段在自定义 tooltip 组件时可以传参到组件中获取每个 point 的值。 除了 xy 值外可以自定义字段在 series.keys 配置项中配置如下
keys: [x,y,custom.A,custom.B,custom.C,
],
data:[[1, 2, A1, B1, C1], [1, 2, A2, B2, C2]]其值便可以在 formatterContext.point.options.custom.A 及 formatterContext.point.options.custom.B 等方式获取。
总结
该实现方式最基本的原理是采用 React 的 createPortal 方法在指定的元素下渲染子元素。可以理解为类似纯 js 的 getElementById(id).html(children(context))。
