0

我正在使用反应顶点图表。Apexcharts我用刷图的时候通过的图报错。下面给出了带有自定义数据的代码。在我的本地组件中使用画笔图表时，我遇到了我在代码后提到的错误

import React, { Component } from "react";
import ReactApexChart from "apexcharts";

class LineChartDemo extends Component {
  constructor(props) {
    super(props);

    this.state = {
      series: [
        {
          name: "series1",
          data: [31, 40, 28, 51, 42, 109, 100],
        },
      ],
      options: {
        chart: {
          id: "chartyear",
          type: "area",
          height: 160,
          background: "#F6F8FA",
          toolbar: {
            show: false,
            autoSelected: "pan",
          },
          events: {
            mounted: function (chart) {
              var commitsEl = document.querySelector(".cmeta span.commits");
              var commits = chart.getSeriesTotalXRange(
                chart.w.globals.minX,
                chart.w.globals.maxX
              );

              commitsEl.innerHTML = commits;
            },
            updated: function (chart) {
              var commitsEl = document.querySelector(".cmeta span.commits");
              var commits = chart.getSeriesTotalXRange(
                chart.w.globals.minX,
                chart.w.globals.maxX
              );

              commitsEl.innerHTML = commits;
            },
          },
        },
        colors: ["#FF7F00"],
        stroke: {
          width: 0,
          curve: "smooth",
        },
        dataLabels: {
          enabled: false,
        },
        fill: {
          opacity: 1,
          type: "solid",
        },
        yaxis: {
          show: false,
          tickAmount: 3,
        },
        xaxis: {
          type: "datetime",
        },
      },

      seriesYears: [
        {
          name: "series1",
          data: [31, 40, 28, 51, 42, 109, 100],
        },
      ],
      optionsYears: {
        chart: {
          height: 200,
          type: "area",
          background: "#F6F8FA",
          toolbar: {
            autoSelected: "selection",
          },
          brush: {
            enabled: true,
            target: "chartyear",
          },
          selection: {
            enabled: true,
            xaxis: {
              min: new Date("26 Jan 2014").getTime(),
              max: new Date("29 Mar 2015").getTime(),
            },
          },
        },
        colors: ["#7BD39A"],
        dataLabels: {
          enabled: false,
        },
        stroke: {
          width: 0,
          curve: "smooth",
        },
        fill: {
          opacity: 1,
          type: "solid",
        },
        legend: {
          position: "top",
          horizontalAlign: "left",
        },
        xaxis: {
          type: "datetime",
        },
      },
    };
  }

  render() {
    debugger;
    return (
      <div id="wrapper">
        <div id="chart-months">
          <ReactApexChart
            options={this.state.options}
            series={this.state.series}
            type="area"
            height={160}
          />
        </div>

        <h5 class="github-style">
          <img
            class="userimg"
            src="https://picsum.photos/200/200/?image=1031"
            data-hovercard-user-id="634573"
            alt=""
            width="38"
            height="38"
          />
          <div class="userdetails">
            <a class="username">coder</a>
            <span class="cmeta">
              <span class="commits"></span> commits
            </span>
          </div>
        </h5>

        <div id="chart-years">
          <ReactApexChart
            options={this.state.optionsYears}
            series={this.state.seriesYears}
            type="area"
            height={200}
          />
        </div>
      </div>
    );
  }
}

export default LineChartDemo;

它通过以下错误

未捕获的类型错误：无法将类作为函数调用

我是否在我的反应组件中使用了正确的 apexcharts 集成方式..？

4

1 回答 1

0

您正在导入错误的库。

首先，您必须安装apexcharts并react-apexcharts

npm install --save react-apexcharts apexcharts

但是在导入时，您应该使用以下内容

import ReactApexChart from "react-apexcharts";
于 2020-12-11T07:21:44.413 回答