ApexCharts 将 class 转换为功能组件

Question

我在为 ApexCharts 插入 chart.type 时遇到问题。已插入类型：line 但无法正常工作。如果我无法定义图表类型或有其他方法可以做到这一点，请提出建议。

import React, { useState, Component } from 'react';
import { makeStyles, createStyles, Theme, useTheme } from '@material-ui/core/styles';
import ApexCharts from 'apexcharts';
import ReactApexChart from "react-apexcharts";

interface ApexChartProps { }

interface TravelDetailsViewProps {
  options?: any;
  series?: any;
}

// const EditRoleForm = ({ onCompleted, onCancel, value, ...rest }: EditRoleFormProps) => {

const TravelDetailsView = () => {

  const theme = useTheme();

  const [chartData, setChartData] = useState({
    options: {
      chart: {
        // type: 'Line',
        id: 'apexchart-example',
        foreColor: theme.palette.primary.main,
      },
      xaxis: {
        categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
      },
      fill: {
        type: 'gradient',
        gradient: {
          shade: 'light',
          type: "horizontal",
          shadeIntensity: 0.5,
          gradientToColors: undefined, // optional, if not defined - uses the shades of same color in series
          inverseColors: true,
          opacityFrom: 1,
          opacityTo: 1,
          stops: [0, 50, 100],
          colorStops: []
        }
      },
      legend: {
        // position: '',
        width: 400,
        // position: 'top',
      },
    },
    series: [{
      name: 'Distance Traveled',
      type: 'column',
      data: [440, 505, 414, 571, 227, 413, 201, 352, 652, 320, 257, 160]
    }, {
      name: 'Time Traveled',
      type: 'line',
      data: [23, 42, 35, 27, 43, 22, 17, 31, 42, 22, 12, 16]
    }],
  });

  return (
    <ReactApexChart 
      options={chartData.options} 
      series={chartData.series} 
      type="line" 
    />
  )
}

export default TravelDetailsView;

错误如下>>>

The types of 'chart.type' are incompatible between these types.
        Type 'string' is not assignable to type '"line" | "area" | "bar" | "histogram" | "pie" | "donut" | "radialBar" | "scatter" | "bubble" | "heatmap" | "treemap" | "boxPlot" | "candlestick" | "radar" | "polarArea" | "rangeBar" | undefined'.

==> 在 node_modules\apexcharts\types\apexcharts.d.ts

下

/**

主要图表选项
见https://apexcharts.com/docs/options/chart/ */

输入 ApexChart = { 宽度？：字符串 |数字高度？：字符串 |数字类型？： | 'line' | 'area' | 'bar' | 'histogram' | 'pie' | 'donut' | 'radialBar' | 'scatter' | 'bubble' | 'heatmap' | 'candlestick' | 'boxPlot' | 'radar' | 'polarArea' | 'rangeBar' | 'treemap'

与 legend.position 相同的问题。

感谢您的帮助。干杯！

Answer 1

因为是静态变量，所以不需要定义state。您可以将 chartData 分配给变量。此外，当您定义变量时，将类型设置为 ApexOptions:

const TravelDetailsView = () => {
  const theme = useTheme();

  const chartData: ApexOptions = {
    chart: {
      type: "line",
      id: "apexchart-example",
      foreColor: theme.palette.primary.main
    },
    xaxis: {
      categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
    },
    fill: {
      type: "gradient",
      gradient: {
        shade: "light",
        type: "horizontal",
        shadeIntensity: 0.5,
        gradientToColors: undefined, // optional, if not defined - uses the shades of same color in series
        inverseColors: true,
        opacityFrom: 1,
        opacityTo: 1,
        stops: [0, 50, 100]
        // colorStops: []
      }
    },
    legend: {
      // position: '',
      width: 400
      // position: 'top',
    },
    series: [
      {
        name: "Distance Traveled",
        type: "column",
        data: [440, 505, 414, 571, 227, 413, 201, 352, 652, 320, 257, 160]
      },
      {
        name: "Time Traveled",
        type: "line",
        data: [23, 42, 35, 27, 43, 22, 17, 31, 42, 22, 12, 16]
      }
    ]
  };

  return <ReactApexChart options={chartData} series={chartData.series} />;
};

ApexCharts 将 class 转换为功能组件

ApexCharts convert class to functional component

reactjs

typescript

charts

apex

apexcharts