У меня на главной странице отображается графическая диаграмма. График отображается нормально, но когда я переключаюсь на страницу своего приложения и возвращаюсь на главную страницу, график исчезает.
Я использую систему маршрутизации в 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
Диаграмма отображается в home.js с использованием <Widget1 /> — person BronzeJamie schedule 01.03.2021
Источник: