Question

我正在尝试使用highcharts-react-official HighchartsReact包装器创建一个极坐标图。但是，我得到了常规的折线图或错误。如何在HighchartsReact包装器中使用highcharts/highcharts-more功能？

import React from 'react';
import {render} from 'react-dom';
import Highcharts from 'highcharts';
import HighchartsMore from 'highcharts/highcharts-more'
import HighchartsReact from './HighchartsReact';

HighchartsMore(Highcharts)

const options = {
  chart: {
    type: 'polar',
  },
  title: {
    text: 'Kahn Chart'
  },
  pane: {
    startAngle: 0,
    endAngle: 360
  },
  xAxis: {
    tickInterval: 90,
    min: 0,
    max: 360,
    labels: {
      format: '{value}°'
    }
  },
  yAxis: {
    min: 0,
    max: 10,
  },
  plotOptions: {
    series: {
      pointStart: 0,
      pointInterval: 90
    },
    column: {
      pointPadding: 0,
      groupPadding: 0
    }
  },
  series: [
    {
      type: 'area',
      name: 'c1',
      data: [7.15, 10,  9.85, 8.81],
    },
    {
      type: 'line',
      name: 'c2',
      data: [4.65, 3.16, 4.30, 4.48],
    },
    {
      type: 'line',
      name: 'Fair Value',
      data: [4.77,6.67, 6.57, 5.87],
    }
  ]
};

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

render(<App/>, document.getElementById('root'));

Answer 1

您需要更改：

chart: {
    type: 'polar',
},

收件人：

chart: {
    polar: true
},

API参考：https://api.highcharts.com/highcharts/chart.polar

如何使用Highcharts-react-official创建极坐标图？

1 个答案: