如何在 Apexcharts 实际加载之前将“正在加载...”文本显示为占位符？

Question

我花了一天时间解决这个问题，但找不到解决方案。如果有人可以帮忙的话请。

所以我在 React 中制作了一个加密货币跟踪器。我设法创建了一个显示多种货币的表格，以及一个列，我在其中根据已保存在 javascript 文件中的 JSON 数据呈现各种货币的 Apexchart，即我没有对 API 进行任何调用来获取数据。我已经有了静态数据。我只是以表格的形式呈现静态数据。

现在的问题是页面的加载时间。由于我需要渲染所有货币的 apexcharts（我总共显示 100 种），显示它们会降低用户体验。

为了改善用户体验，我想添加占位符文本“正在加载...”，只有当 apexchart 加载完成后，我才想显示图表。

下面是我的图形组件，负责加载我的 apexchart。

import Chart from 'react-apexcharts';
import { ChartData } from '../data/ChartData';

class Graph extends Component {
  state = {
    options: {
      stroke: {
        width: 1.7,
      },
      grid: {
        show: false,
      },
      datalabels: {
        enabled: false,
      },
      tooltip: {
        enabled: false,
      },
      chart: {
        animations: {
          enabled: false,
        },
        toolbar: {
          show: false,
        },
        zoom: {
          enabled: false,
        },
      },
      yaxis: {
        show: false,
        labels: {
          formatter: function () {
            return '';
          },
        },
      },
      xaxis: {
        labels: {
          formatter: function () {
            return '';
          },
        },
        tooltip: {
          enabled: false,
        },
      },
    },

    series: [
      {
        name: 'USD',
        data: ChartData[this.props.idx].data,
      },
    ],
  };

  render() {
    return (
      <div className="graph">
        <div className="row">
          <div className="mixed-chart">
            <Chart
              options={this.state.options}
              series={this.state.series}
              type="line"
              width="200px"
              height="100px"
            />
          </div>
        </div>
      </div>
    );
  }
}

export default Graph;

！[如您所见，我绘制了 Apexchart。现在，由于加载图表需要时间，我想添加占位符文本“正在加载”，当图表加载完成时，我想显示图表以提供更好的用户体验]屏幕截图

Answer 1

您只需将对象 nodata 添加到现有选项对象即可。以下是对象定义：

使用条件运算符仅在实际加载数据时才显示 Loading。感谢@Morpheus 指出了这一点

noData: {  
  text: isDataBeingFetched ? "Loading...":"No Data present in the graph!",  
  align: 'center',  
  verticalAlign: 'middle',  
  offsetX: 0,  
  offsetY: 0,  
  style: {  
    color: "#000000",  
    fontSize: '14px',  
    fontFamily: "Helvetica"  
  }  
}

请参阅以下链接的文档中的内容。

• https://apexcharts.com/docs/options/nodata/