如何解决如何使用chartjs全屏显示自定义工具提示?
我有一个使用自定义工具提示的 chartjs 组件。它运作良好。但是当我以全屏方式呈现图表时,工具提示消失了。这是因为它附加在文档的正文中。我试图将它附加到图表,但它的位置变得不准确,并且在全屏模式下仍然隐藏。如何确保自定义工具提示始终以全屏模式显示?
代码如下:
// chart file
const options = useMemo(() => getoptions(manyData),[manyData])
return (
<ChartJS
chart={lineChart}
setChart={setLineChart}
type="line"
data={data}
options={options}
/>
)
// getoptions
const getDataSeries = (dataPoints,series) => map(dataPoints,(dataPoint) => {
const datasetIndex = dataPoint.datasetIndex;
const index = dataPoint.index;
return {
label: series[datasetIndex].label,date: series[datasetIndex].data[index].date,count: series[datasetIndex].data[index].count,};
});
export const getoptions = (
chart: any,series: Serie[],chartTooltip?: (series: TooltipSerie[]) => ReactNode,config?: Partial<ChartOptions>,): ChartOptions => ({
tooltips: {
mode: "point",intersect: false,caretPadding: 24,enabled: false,custom: (tooltipModel) => {
if (!tooltipModel.opacity) {
closeCustomTooltip();
return;
}
const dataPoints = tooltipModel.dataPoints;
const dataSeries = getDataSeries(dataPoints,series)
openCustomTooltip(
tooltipModel,chart,chartTooltip ? (
chartTooltip(dataSeries)
) : (
<Tooltip series={dataSeries}
/>
)
);
},...get(config,"tooltips"),},});
// Tooltip component
const Component = ({ label,subLabel,content }) => (
<Root>
<Header>
<Label>{label}</Label>
<SubLabel>{subLabel}</SubLabel>}
</Header>
{content}
</Root>
);
// open custom tooltip function
export const openCustomTooltip = (tooltipModel,tooltipContent) => {
let tooltipEl = document.getElementById("chartjs-tooltip");
if (!tooltipEl) {
tooltipEl = document.createElement("div");
tooltipEl.id = "chartjs-tooltip";
document.body.appendChild(tooltipEl);
}
const position = chart.canvas.getBoundingClientRect();
const { caretX,caretY,xAlign } = tooltipModel;
const left = position.left + window.pageXOffset + caretX;
const top = position.top + window.pageYOffset + caretY;
const tooltipPosition = xAlign === "right" ? "left" : "right";
ReactDOM.render(
<Component
tooltipContent={<div>{tooltipContent}</div>}
tooltipPosition={tooltipPosition}
left={left}
top={top}
/>,tooltipEl
);
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。