在 React 中更改页面时 Apexchart 消失
Apexchart disappearing when changing page in 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="http://www.w3.org/2000/svg" xmlnsXlink="http://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" data-color="danger" 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;
如果您先通过 /patients 启动您的应用程序，然后转到您的应用程序组件，那么这也不会起作用。
所以，这不是来回走动的问题。您的图表初始化函数是在代码中某处开始调用的，因此当您的图表组件首先呈现时，代码获取 dom 元素并对其进行初始化。但是在导航时，只有组件代码运行，而将重新初始化抛在脑后。因此，在需要图表的 Home 组件的 componentDidMount 生命周期中调用 init 函数。
我的主页上显示了一个图表。该图正常显示，但是当我切换到我的应用程序中的页面并返回主页时，该图消失了。
我在 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="http://www.w3.org/2000/svg" xmlnsXlink="http://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" data-color="danger" 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;
如果您先通过 /patients 启动您的应用程序，然后转到您的应用程序组件，那么这也不会起作用。
所以，这不是来回走动的问题。您的图表初始化函数是在代码中某处开始调用的，因此当您的图表组件首先呈现时，代码获取 dom 元素并对其进行初始化。但是在导航时，只有组件代码运行，而将重新初始化抛在脑后。因此，在需要图表的 Home 组件的 componentDidMount 生命周期中调用 init 函数。