在Canvasjs中使用useEffect时自定义导出按钮文本变得未定义

Question

https://stackblitz.com/edit/vitejs-vite-myutvi?file=src%2FApp.jsx

你好，

我目前正在集成自定义导出功能。我的目标是添加一个导出按钮以显示“另存为 CSV”，但文本呈现为未定义。

import React, { useEffect, useState } from 'react';
import CanvasJSReact from '@canvasjs/react-charts';

const { CanvasJSChart } = CanvasJSReact;

function Chart({ isLoading, data }) {
  // Default chart options setup
  const defaultOptions = {
    animationEnabled: true,
    exportEnabled: true,
    theme: 'dark2',
    // Additional options...
  };

  const [chartOptions, setChartOptions] = useState(defaultOptions);

  useEffect(() => {
    // Conditional logic based on <code>isLoading</code> and <code>data</code>
    if (isLoading) {
      setChartOptions({ ...defaultOptions, /* Loading state */ });
    } else if (data?.length > 0) {
      setChartOptions({ ...defaultOptions, /* Data available state */ });
    } else {
      setChartOptions({ ...defaultOptions, /* No data state */ });
    }
  }, [isLoading, data]);

 
  return (
    <CanvasJSChart
      options={chartOptions}
      onRef={(chart) => {
        if (chart?.get("exportEnabled")) {
          const text = document.createTextNode("Save as CSV");
          const exportCSV = document.createElement("div");
          exportCSV.appendChild(text);
          exportCSV.setAttribute('style', <code>padding: 12px 8px; background-color: ${chart.toolbar.itemBackgroundColor}; color: ${chart.toolbar.fontColor}</code>);
          exportCSV.addEventListener('mouseover', () => {
            exportCSV.setAttribute('style', <code>padding: 12px 8px; background-color: ${chart.toolbar.itemBackgroundColorOnHover}; color: ${chart.toolbar.fontColorOnHover}</code>);
          });
          exportCSV.addEventListener('mouseout', () => {
            exportCSV.setAttribute('style', <code>padding: 12px 8px; background-color: ${chart.toolbar.itemBackgroundColor}; color: ${chart.toolbar.fontColor}</code>);
          });
          chart._toolBar.lastChild.appendChild(exportCSV);
        }
      }}
    />
  );
}

function App() {
  return <div className="App"><Chart isLoading={true} data={[]} /></div>;
}

export default App;

Answer 1

这是一个棘手的问题。似乎该库在每次渲染时都会改变工具栏元素的 DOM。我正在使用一个技巧来延迟导出 CSV 按钮的渲染 2 秒，以等待图表稳定下来。

https://stackblitz.com/edit/vitejs-vite-c3rraa?file=src%2FApp.jsx,src%2FExportCSVButton.jsx

import { createPortal } from 'react-dom';
import {useState, useEffect} from "react";

export default function ExportCSVButton({chartRef}) {
  const [rendered, setRendered] = useState(false); 
  
 
  useEffect(() => { 
    const timer = setTimeout(() => { 
      setRendered(true); 
    }, 2000); 
 
    return () => clearTimeout(timer); 
  }, []); 

  return (
    chartRef?._toolBar?.lastChild && rendered && (
      createPortal(<div style={{padding: "12px 8px", backgroundColor: "#666666", color: "#F5F5F5"}}>Save As CSV</div>, chartRef?._toolBar?.lastChild))
  )
}