如何显示“正在加载..."在我的 Apexcharts 实际加载之前将文本作为占位符? [英] How to show "loading..." text as a placeholder before my Apexcharts actually loads?

问题描述

我花了一天时间来解决这个问题，但找不到解决方案.请如果有人可以提供帮助.

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

现在的问题是页面的加载时间.由于我需要为所有货币呈现 apexcharts(我总共显示 100 个)，因此显示它们会降低用户体验.

为了改善用户体验，我想添加占位符文本正在加载..."；当 apexchart 完成加载时，我才想显示图表.

下面是我的 Graph 组件，它负责加载我的 apexchart.

从'react-apexcharts'导入图表；从 '../data/ChartData' 导入 { ChartData };类图扩展组件{状态 = {选项: {中风: {宽度:1.7，},网格: {显示:假，},数据标签:{启用:假，},工具提示:{启用:假，},图表: {动画:{启用:假，},工具栏:{显示:假，},飞涨: {启用:假，},},y轴:{显示:假，标签: {格式化程序:函数(){返回 '​​';},},},x轴:{标签: {格式化程序:函数(){返回 '​​';},},工具提示:{启用:假，},},},系列: [{名称:'美元'，数据:图表数据[this.props.idx].data，},],};使成为() {返回 (<div className="graph"><div className="row"><div className="mixed-chart"><图表选项={this.state.options}系列={this.state.series}类型=线"宽度=200像素"；高度=100像素"/>

);}}导出默认图表；

![如你所见，我已经绘制了我的 Apexchart.现在因为加载图表需要时间，我想添加一个占位符文本加载"当图表加载完成时，我想显示图表以提供更好的用户体验]屏幕截图

解决方案

您只需要将对象 nodata 添加到现有的选项对象中.以下是对象定义:

无数据:{文字:加载中..."，居中对齐'，垂直对齐:'中间'，偏移X:0，偏移量:0，风格: {颜色:#000000"，字体大小:'14px'，fontFamily:Helvetica"}}

请参阅以下链接的文档.

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

I spent a day figuring this out but was unavailable to find a solution. Please if anyone can help.

So I was making a cryptocurrency tracker in React. I managed to create a table displaying several currencies and also a column where I render Apexchart for various currencies based on the JSON data that's already saved with me in a javascript file i.e I'm not making any call to API to get the data. I already have static data with me. I just rendered the static data in the form of a table.

Now the problem is with the loading time of the page. As I need to render apexcharts for all the currencies(I'm displaying 100 in total), displaying them slows down the user experience.

To improve the user experience I want to add a placeholder text "loading..." and when the apexchart is done loading only then I want to display the chart.

Below is my Graph component that's responsible for loading my 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;

![As you can see I have my Apexchart plotted. Now as it takes time to load the chart I want to add a placeholder text "loading" and when the chart loading completes I want to display the chart giving a better user experience]Screenshot

解决方案

You just need to add the object nodata to the existing options object. The following is the object definition:

noData: {  
  text: "Loading...",  
  align: 'center',  
  verticalAlign: 'middle',  
  offsetX: 0,  
  offsetY: 0,  
  style: {  
    color: "#000000",  
    fontSize: '14px',  
    fontFamily: "Helvetica"  
  }  
}

Refer to it in the documentation on below link.

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

这篇关于如何显示“正在加载..."在我的 Apexcharts 实际加载之前将文本作为占位符?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！