Главная » Вопросы

Apexchart исчезает при смене страницы в React

Вопросы

У меня на главной странице отображается графическая диаграмма. График отображается нормально, но когда я переключаюсь на страницу своего приложения и возвращаюсь на главную страницу, график исчезает.

Я использую систему маршрутизации в React для переключения между своими страницами.

Компонент реакции на визуализируемом графике:

import React,{Component} from 'react'; 

class Widget1 extends React.Component{
    render(){
        return(
            <div> 

                    {/*begin::Stats Widget 1*/}
                    <div className="card card-custom gutter-b">
                        {/*begin::Body*/}
                        <div className="card-body p-0">
                          <div className="d-flex align-items-center justify-content-between card-spacer flex-grow-1">
                            <span className="symbol symbol-circle symbol-50 symbol-light-danger mr-2">
                              <span className="symbol-label">
                                <span className="svg-icon svg-icon-xl svg-icon-danger">
                                  {/*begin::Svg Icon | path:assets/media/svg/icons/Layout/Layout-4-blocks.svg*/}
                                  <svg xmlns="https://www.w3.org/2000/svg" xmlnsXlink="https://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                    <g stroke="none" strokeWidth={1} fill="none" fillRule="evenodd">
                                      <rect x={0} y={0} width={24} height={24} />
                                      <rect fill="#000000" x={4} y={4} width={7} height={7} rx="1.5" />
                                      <path d="M5.5,13 L9.5,13 C10.3284271,13 11,13.6715729 11,14.5 L11,18.5 C11,19.3284271 10.3284271,20 9.5,20 L5.5,20 C4.67157288,20 4,19.3284271 4,18.5 L4,14.5 C4,13.6715729 4.67157288,13 5.5,13 Z M14.5,4 L18.5,4 C19.3284271,4 20,4.67157288 20,5.5 L20,9.5 C20,10.3284271 19.3284271,11 18.5,11 L14.5,11 C13.6715729,11 13,10.3284271 13,9.5 L13,5.5 C13,4.67157288 13.6715729,4 14.5,4 Z M14.5,13 L18.5,13 C19.3284271,13 20,13.6715729 20,14.5 L20,18.5 C20,19.3284271 19.3284271,20 18.5,20 L14.5,20 C13.6715729,20 13,19.3284271 13,18.5 L13,14.5 C13,13.6715729 13.6715729,13 14.5,13 Z" fill="#000000" opacity="0.3" />
                                    </g>
                                  </svg>
                                  {/*end::Svg Icon*/}
                                </span>
                              </span>
                            </span>
                            <div className="d-flex flex-column text-right">
                              <span className="text-dark-75 font-weight-bolder font-size-h3">12000 dh</span>
                              <span className="text-muted font-weight-bold mt-2">Revenu hebdomadaire</span>
                            </div>
                          </div>
                          <div id="kt_stats_widget_11_chart" className="card-rounded-bottom"  style={{height: 150}} />
                        </div>
                        {/*end::Body*/}
                      </div>
                      {/*end::Stats Widget 1*/}


            </div>
        )
    }
}

export default Widget1;

JavaScript графика (месяцы, цвет и т. д.):

var _initStatsWidget11 = function () {
        var element = document.getElementById("kt_stats_widget_11_chart");

        var height = parseInt(KTUtil.css(element, 'height'));
        var color = KTUtil.hasAttr(element, 'data-color') ? KTUtil.attr(element, 'data-color') : 'success';

        if (!element) {
            return;
        }

        var options = {
            series: [{
                name: 'Profit',
                data: [40, 40, 30, 30, 35, 35, 50]
            }],
            chart: {
                type: 'area',
                height: 150,
                toolbar: {
                    show: false
                },
                zoom: {
                    enabled: false
                },
                sparkline: {
                    enabled: true
                }
            },
            plotOptions: {},
            legend: {
                show: false
            },
            dataLabels: {
                enabled: false
            },
            fill: {
                type: 'solid',
                opacity: 1
            },
            stroke: {
                curve: 'smooth',
                show: true,
                width: 3,
                colors: [KTApp.getSettings()['colors']['theme']['base'][color]]
            },
            xaxis: {
                categories: ['Jan','Feb', 'Mar', 'Apr', 'May', 'Jun', 'Aug', 'Sep'],
                axisBorder: {
                    show: false,
                },
                axisTicks: {
                    show: false
                },
                labels: {
                    show: false,
                    style: {
                        colors: KTApp.getSettings()['colors']['gray']['gray-500'],
                        fontSize: '12px',
                        fontFamily: KTApp.getSettings()['font-family']
                    }
                },
                crosshairs: {
                    show: false,
                    position: 'front',
                    stroke: {
                        color: KTApp.getSettings()['colors']['gray']['gray-300'],
                        width: 1,
                        dashArray: 3
                    }
                },
                tooltip: {
                    enabled: true,
                    formatter: undefined,
                    offsetY: 0,
                    style: {
                        fontSize: '12px',
                        fontFamily: KTApp.getSettings()['font-family']
                    }
                }
            },
            yaxis: {
                min: 0,
                max: 55,
                labels: {
                    show: false,
                    style: {
                        colors: KTApp.getSettings()['colors']['gray']['gray-500'],
                        fontSize: '12px',
                        fontFamily: KTApp.getSettings()['font-family']
                    }
                }
            },
            states: {
                normal: {
                    filter: {
                        type: 'none',
                        value: 0
                    }
                },
                hover: {
                    filter: {
                        type: 'none',
                        value: 0
                    }
                },
                active: {
                    allowMultipleDataPointsSelection: false,
                    filter: {
                        type: 'none',
                        value: 0
                    }
                }
            },
            tooltip: {
                style: {
                    fontSize: '12px',
                    fontFamily: KTApp.getSettings()['font-family']
                },
                y: {
                    formatter: function (val) {
                        return "$" + val + " thousands"
                    }
                }
            },
            colors: [KTApp.getSettings()['colors']['theme']['light'][color]],
            markers: {
                colors: [KTApp.getSettings()['colors']['theme']['light'][color]],
                strokeColor: [KTApp.getSettings()['colors']['theme']['base'][color]],
                strokeWidth: 3
            }
        };

        var chart = new ApexCharts(element, options);
        chart.render();
    }

App.js для переключения страниц:

import Home from './pages/home';
import HeaderMenu from './components/HeaderMenu';
import Menu from './components/menu';
import Widget1 from './components/Widget1';
import Patient from './pages/patients';
import logo from './logo.svg';
import './App.css';
import {BrowserRouter as Router,Route,Switch} from 'react-router-dom'; 
 


const App = () => { 
    return (
      <div>
        <Router>

          <Menu /> 
          <HeaderMenu />  
            <Switch>
             <Route exact path="/"  component={Home}>
                <Home />
            </Route>

            <Route path='/patients' component={Patient}>
                <Patient />
            </Route> 
          </Switch> 
          
        </Router>
      </div>
    )
    
}

export default App;

Где вы рисуете диаграммы? Также вам следует ознакомиться с response-apexcharts.   —  person BronzeJamie    schedule 01.03.2021

См. также:  С праздником от Jscrambler — специальный подарок для вас

Диаграмма отображается в home.js с использованием <Widget1 />   —  person BronzeJamie    schedule 01.03.2021

Post Views: 77
1 apexcharts javascript reactjs
Понравилась статья? Поделиться с друзьями:
Вам также может быть интересно
Вопросы 1
Как запустить анимацию CSS только после полной загрузки страницы?
У меня есть предварительный загрузчик css, который работает до полной загрузки страницы. Который затем
Вопросы 3
Может ли Pip установить зависимости, не указанные в setup.py во время установки?
Я бы хотел, чтобы pip установил зависимость, которая у меня есть на GitHub, когда
Вопросы 0
Настройка конечного автомата (таймеров) spring (uml) для модульных тестов
Попытка модульного тестирования конечного автомата Spring UML с таймерами. Ожидается, что в реальном режиме
Вопросы 0
Загрузка фикстур Symfony с помощью консольных команд
Я бы хотел, чтобы моя база данных сбрасывалась после каждого теста выполнением консольных команд
Вопросы 1
onMouseLeave / onMouseOut иногда срабатывает при обновлении страницы React
У меня есть изображение, и когда я нахожу на него указатель мыши, запускается событие
Вопросы 2
Связанный список: как реализовать деструктор, конструктор копирования и оператор присваивания копирования?
Это мой код на С++: #include <iostream> using namespace std; typedef struct Node {
IT Шеф
Комментарии: 1
  1. BronzeJamie

    Если вы сначала запустите приложение с /patients, а затем перейдете к компоненту приложения, это тоже не сработает. Итак, это не проблема движения вперед и назад. ваша функция инициализации диаграммы вызывается в начале где-то в вашем коде, поэтому, когда компонент диаграммы сначала отображает, код получает элемент dom и инициализирует его. Но при навигации выполняется только код компонента, а повторная инициализация остается позади. Итак, вызовите функцию init в componentDidMount жизненном цикле компонента Home там, где вам нужна диаграмма.

    Да, думаю, ты прав. Но как новичок в React, я точно не знаю, что добавить в componentDidMount, это просто инициализация, как это было сделано в JS диаграммы? — person BronzeJamie; 01.03.2021

    да, вызовите эту функцию, которую вы выполнили в своем файле js. — person BronzeJamie; 01.03.2021

    При вызове той же функции из файла js в домашний компонент многие переменные не определяются, такие как KTApp и ApexCharts. Они не инициализируются нигде в файле js, но я думаю, в другом отдельном файле. Стоит ли экспортировать все из разных источников? — person BronzeJamie; 01.03.2021

    Вам следует использовать модули, это будет намного проще. Вы должны использовать React Apexcharts. Здесь есть множество примеров apexcharts.com/docs/react-charts — person BronzeJamie; 01.03.2021

    Да, это то, что я буду делать. Существующий код взят из шаблона HTML, который я пытаюсь преобразовать для реагирования, поэтому график там немного красивее. В любом случае спасибо, потому что теперь я знаю, по крайней мере, где у меня возникла проблема. — person BronzeJamie; 01.03.2021

    Большой. Надеюсь, ты сможешь исправить свою проблему сейчас. — person BronzeJamie; 01.03.2021

    У меня все заработало :)! Еще раз спасибо за идеи! — person BronzeJamie; 02.03.2021

    Ответить
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: