如何使用chartjs全屏显示自定义工具提示？

编程问答 2022-04-21

问题描述

我有一个使用自定义工具提示的 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 (将#修改为@）

fullscreenfullscreenjavascriptreactjsreactjsreactjsreactjstooltiptooltiptooltip