ApexCharts 给出时间 t.every 不是函数
下面的 apexcharts 代码允许我在 React 中绘制图表,但是当我运行代码时,会显示图表,但在 n 秒后我收到了下面报告的错误,这是由于什么以及如何修复它?
异常:
t.every is not a function
代码反应:
import React from "react";
import { Row, Col } from "reactstrap";
import Widget from "../../../components/Widget";
import ApexChart from "react-apexcharts";
import config from "./config";
import s from "./Charts.module.scss";
import { chartData, liveChart, liveChartInterval } from "./mock";
import Sparklines from "../../../components/Sparklines";
import ReactEchartsCore from "echarts-for-react/lib/core";
import echarts from "echarts/lib/echarts";
import "echarts/lib/chart/line";
import "echarts/lib/chart/pie";
import "echarts/lib/chart/themeRiver";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/legend";
import { statisticheAnnoCorrente } from "../../../services/statistiche";
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import exporting from "highcharts/modules/exporting";
import exportData from "highcharts/modules/export-data";
exporting(Highcharts);
exportData(Highcharts);
const colors = config.chartColors;
let columnColors = [
colors.blue,
colors.green,
colors.orange,
colors.red,
colors.default,
colors.gray,
colors.teal,
colors.pink,
];
class Charts extends React.Component {
constructor() {
super();
this.state = {
cd: chartData,
preventiviValue: {},
preventiNameValue: {},
ld: liveChart,
initEchartsOptions: {
renderer: "canvas",
},
sparklineData: {
series: [{ data: [1, 7, 3, 5, 7, 8] }],
options1: {
colors: ["#db2a34"],
plotOptions: {
bar: {
columnWidth: "50%",
},
},
},
options2: {
colors: ["#2477ff"],
plotOptions: {
bar: {
columnWidth: "50%",
},
},
},
},
};
}
async componentDidMount() {
try {
var values = await statisticheAnnoCorrente(true);
var values2 = await statisticheAnnoCorrente(false);
var castingvalues = [];
for (var i = 0; i < values2.length; i++) {
if (values2[i].RagioneSociale != undefined) {
castingvalues.push(values2[i].RagioneSociale);
}
}
this.setState({
preventiviValue: values,
preventiNameValue: {
chart: {
height: 350,
type: "bar",
},
colors: columnColors,
plotOptions: {
bar: {
columnWidth: "45%",
distributed: true,
},
},
dataLabels: {
enabled: false,
},
xaxis: {
categories: castingvalues,
labels: {
style: {
colors: columnColors,
fontSize: "10px",
},
},
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
},
yaxis: {
labels: {
style: {
color: colors.textColor,
},
},
},
tooltip: {
theme: "dark",
},
grid: {
borderColor: colors.gridLineColor,
},
},
});
} catch (err) {
console.log("Errore: " + err);
}
}
componentWillUnmount() {
clearInterval(liveChartInterval);
}
render() {
const { cd, ld, initEchartsOptions, sparklineData } = this.state;
return (
<div className={s.root}>
<h1 className="page-title">
Statistiche - <span className="fw-semi-bold">Globali</span>
</h1>
<div>
<Row>
<Col lg={7} xs={12}>
<Widget
title={
<h5>
Preventivi Accettati{" "}
<span className="fw-semi-bold">Anno corrente</span>
</h5>
}
close
collapse
>
<ApexChart
className="sparkline-chart"
height={350}
series={this.state.preventiviValue}
options={this.state.preventiNameValue}
type={"bar"}
/>
</Widget>
</Col>
}...
the apexcharts code below allows me to plot a graph in react, but when I run the code the graph is displayed but after n seconds I have the error reported below, what is it due to and how can I fix it?
Exception:
t.every is not a function
Code React:
import React from "react";
import { Row, Col } from "reactstrap";
import Widget from "../../../components/Widget";
import ApexChart from "react-apexcharts";
import config from "./config";
import s from "./Charts.module.scss";
import { chartData, liveChart, liveChartInterval } from "./mock";
import Sparklines from "../../../components/Sparklines";
import ReactEchartsCore from "echarts-for-react/lib/core";
import echarts from "echarts/lib/echarts";
import "echarts/lib/chart/line";
import "echarts/lib/chart/pie";
import "echarts/lib/chart/themeRiver";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/legend";
import { statisticheAnnoCorrente } from "../../../services/statistiche";
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import exporting from "highcharts/modules/exporting";
import exportData from "highcharts/modules/export-data";
exporting(Highcharts);
exportData(Highcharts);
const colors = config.chartColors;
let columnColors = [
colors.blue,
colors.green,
colors.orange,
colors.red,
colors.default,
colors.gray,
colors.teal,
colors.pink,
];
class Charts extends React.Component {
constructor() {
super();
this.state = {
cd: chartData,
preventiviValue: {},
preventiNameValue: {},
ld: liveChart,
initEchartsOptions: {
renderer: "canvas",
},
sparklineData: {
series: [{ data: [1, 7, 3, 5, 7, 8] }],
options1: {
colors: ["#db2a34"],
plotOptions: {
bar: {
columnWidth: "50%",
},
},
},
options2: {
colors: ["#2477ff"],
plotOptions: {
bar: {
columnWidth: "50%",
},
},
},
},
};
}
async componentDidMount() {
try {
var values = await statisticheAnnoCorrente(true);
var values2 = await statisticheAnnoCorrente(false);
var castingvalues = [];
for (var i = 0; i < values2.length; i++) {
if (values2[i].RagioneSociale != undefined) {
castingvalues.push(values2[i].RagioneSociale);
}
}
this.setState({
preventiviValue: values,
preventiNameValue: {
chart: {
height: 350,
type: "bar",
},
colors: columnColors,
plotOptions: {
bar: {
columnWidth: "45%",
distributed: true,
},
},
dataLabels: {
enabled: false,
},
xaxis: {
categories: castingvalues,
labels: {
style: {
colors: columnColors,
fontSize: "10px",
},
},
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
},
yaxis: {
labels: {
style: {
color: colors.textColor,
},
},
},
tooltip: {
theme: "dark",
},
grid: {
borderColor: colors.gridLineColor,
},
},
});
} catch (err) {
console.log("Errore: " + err);
}
}
componentWillUnmount() {
clearInterval(liveChartInterval);
}
render() {
const { cd, ld, initEchartsOptions, sparklineData } = this.state;
return (
<div className={s.root}>
<h1 className="page-title">
Statistiche - <span className="fw-semi-bold">Globali</span>
</h1>
<div>
<Row>
<Col lg={7} xs={12}>
<Widget
title={
<h5>
Preventivi Accettati{" "}
<span className="fw-semi-bold">Anno corrente</span>
</h5>
}
close
collapse
>
<ApexChart
className="sparkline-chart"
height={350}
series={this.state.preventiviValue}
options={this.state.preventiNameValue}
type={"bar"}
/>
</Widget>
</Col>
}...
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论