时间戳

首页 > 解决方案 > 使用传递给 apexchart 选项的道具值反应错误

reactjs - 使用传递给 apexchart 选项的道具值反应错误

问题描述

使用 apexChart 创建图表。
我正在使用反应，打字稿，next.js。
我在选项中收到以下类型错误。

错误消息 输入'{颜色：字符串[]; 图表：{类型：字符串；高度：数字；}; plotOptions：{栏：{水平：布尔值；数据标签：{位置：字符串；}; }; }; 数据标签：{启用：布尔值；offsetX：数字；风格：{字体大小：字符串；颜色：字符串[]；}; }; 中风： { ...; }; 工具提示：{ ...; }; 坐标轴：{ ...; }; responsive: { ......' 不可分配给类型“ApexOptions”。'chart.type' 的类型在这些类型之间不兼容。类型“字符串”不可分配给类型“区域”| “线” | “酒吧” | “直方图” | “馅饼” | “甜甜圈” | "径向条" | “分散” | “泡沫” | “热图” | “树图” | "箱线图" | "烛台" | “雷达” | “极地” | “范围栏” | undefined'.ts(2322) react-apexcharts.d.ts(27, 5): 预期的类型来自属性'options'，它在类型'IntrinsicAttributes & Props & { children?: ReactNode; }'

import dynamic from 'next/dynamic';
import React from 'react';

export const Chart: React.FC = () => {
  const ApexCharts = dynamic(() => import('react-apexcharts'), { ssr: false });

  const barOptions = {
    width: '100%',
    series: [
      {
        name: 'group1',
        data:[44, 55, 41, 64, 22, 43, 21],
      },
      {
        name: 'group2',
        data: [53, 32, 33, 52, 13, 44, 100],
      },
    ],
    options: {
      colors: ['#008080 ', '#008000 '],
      chart: {
        type: 'bar',
        height: 430,
      },
      plotOptions: {
        bar: {
          horizontal: true,
          dataLabels: {
            position: 'top',
          },
        },
      },
      dataLabels: {
        enabled: true,
        offsetX: -6,
        style: {
          fontSize: '12px',
          colors: ['#fff'],
        },
      },
      stroke: {
        show: true,
        width: 1,
        colors: ['#fff'],
      },
      tooltip: {
        shared: false,
        intersect: false,
      },
      xaxis: {
        categories: ['1', '2', '3', '4', '5', '6', '7', '8'] },
    },
  };

  return (
    <ApexCharts options={barOptions.options} series={barOptions.series} type="bar" />
  );
});

标签： reactjstypescript

解决方案

尝试type: 'bar'从您的配置中删除。没有它它应该可以工作，因为无论如何您都将类型作为道具传递。

推荐阅读