Блог

Я потратил день на то, чтобы разобраться в этом, но не смог найти решение. Пожалуйста, если кто-нибудь может помочь.

Итак, я делал отслеживание криптовалюты в React. Мне удалось создать таблицу, отображающую несколько валют, а также столбец, в котором я отображаю Apexchart для различных валют на основе данных JSON, которые уже сохранены у меня в файле javascript, т.е. Я не вызываю 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. Теперь, поскольку для загрузки диаграммы требуется время, я хочу добавить текст-заполнитель «загрузка», и когда загрузка диаграммы завершится, я хочу отобразить диаграмму, чтобы улучшить пользовательский интерфейс]Скриншот

Вам просто нужно добавить объект nodata к существующему объекту options. Ниже приведено определение объекта:

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

Обратитесь к нему в документации по ссылке ниже.

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