ApexCharts 给出时间 t.every 不是函数

发布于 2025-01-11 09:17:34 字数 4639 浏览 0 评论 0原文

下面的 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文