高图漏斗问题

编程问答 2022-05-23

问题描述

我正在尝试使用 highcharts-react-official 创建漏斗图，但出现错误：

**未捕获的类型错误：无法读取未定义的属性“noop”

它出现在 highchart 模块内的 funnel.js 中。并使浏览器陷入调试器模式。任何帮助，将不胜感激。 提前致谢

这是我的代码：

import React from 'react';
import { Grid,Typography } from '@material-ui/core';
import TextCountComp from '../../../../shared/components/textCount/TextCountComp';
import useStyles from './ChartAnalyticsCompStyle';
import Highcharts from "highcharts/highstock";
import funnel from "highcharts/modules/funnel.js";
import HighchartsReact from "highcharts-react-official";

funnel(Highcharts);


const options =  {
  series: [
    {
      type: "funnel",data: [1,2,3]
    }
  ]
}

const ChartAnalyticsComp = () => {
  const classes = useStyles();
  return (
    <Grid container className={classes.root}>
      <Grid item xs={2} className={classes.grid}>
        <TextCountComp className={classes.Box} align="center" headText="Total" value="$0" />
      </Grid>
      <Grid item xs>
        {/* chart goes here */}
        Chart
        <HighchartsReact highcharts={Highcharts} options={options} />
      </Grid>
      <Grid container item xs direction="column">
        {/* texts goes here just use <Typography> component for each line of text */}
        <Typography>Text 1</Typography>
        <Typography>Text 2</Typography>
        ....
      </Grid>
    </Grid>
  );
};

export default ChartAnalyticsComp;

这是上面使用的 TextCountComp。


import React from 'react';
import { Box,Typography,TypographyTypeMap } from '@material-ui/core';

interface PropType {
  headText: string;
  value: string | number;
  color?: TypographyTypeMap['props']['color'];
  align?: TypographyTypeMap['props']['align'];
  border?: boolean;
  className?: string;
}

const TextCountComp = (
  {
    headText,value,color,border,align,className,}: PropType,) => (
    <Box border={+border!} className={className}>
    <Typography variant="body1" color={color}>{headText}</Typography>
    <Typography align={align} variant="body1" color="secondary">{value}</Typography>
  </Box>
);

TextCountComp.defaultProps = {
  color: 'primary',border: true,align: 'center',className: undefined,};

export default TextCountComp;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptjsxjsxjsxreact-highchartsreactjsreactjsreactjsreactjs