0

我正在尝试使用带有反应的高图极地。我尝试轻松地创建直线图和饼图。但是，基于 Highcharts API，chart:{type: pie}我需要输入chart:{polar: true}.

之后我直接在 App.js 上进行了编辑npx-create-react myapp，以及我认为不需要说明的以下步骤。

这是我的完整代码：

import React from "react";
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import HighchartsMore from "highcharts/highcharts-more";
HighchartsMore(Highcharts);

const options = {
  chart: {
    polar: true
  },

  title: {
    text: "Highcharts Polar Chart"
  },

  subtitle: {
    text: "Also known as Radar Chart"
  },

  pane: {
    startAngle: 0,
    endAngle: 360
  },

  xAxis: {
    tickInterval: 45,
    min: 0,
    max: 360,
    labels: {
      format: "{value}°"
    }
  },

  yAxis: {
    min: 0
  },

  plotOptions: {
    series: {
      pointStart: 0,
      pointInterval: 45
    },
    column: {
      pointPadding: 0,
      groupPadding: 0
    }
  },

  series: [
    {
      type: "column",
      name: "Column",
      data: [8, 7, 6, 5, 4, 3, 2, 1],
      pointPlacement: "between"
    },
    {
      type: "line",
      name: "Line",
      data: [1, 2, 3, 4, 5, 6, 7, 8]
    },
    {
      type: "area",
      name: "Area",
      data: [1, 8, 2, 7, 3, 6, 4, 5]
    }
  ]
};

const App = () => (
  <div>
    <HighchartsReact
      Highcharts={Highcharts}
      Highcharts={Highcharts}
      options={options}
    />
  </div>
);

export default App;

这将只输出带有柱形、三角形和线条的笛卡尔图，而不是极坐标图。

帮忙谢谢！

4

1 回答 1

1

原帖

尝试像这样导入依赖项

import ReactHighchart from 'react-highcharts';
import HighchartMore from 'highcharts/highcharts-more';
HighchartMore(ReactHighchart.Highcharts);

另请参阅有关最新 highcharts 版本中存在的错误的信息。

于 2019-05-08T10:19:36.227 回答