Question

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

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

这是我的完整代码：

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;

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

帮助谢谢！

Answer 1

Original post

尝试像这样导入依赖项

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

还请参阅最新的highcharts版本中的this one about the bug。

Highcharts极地结果是线而不是极地

1 个答案: