Question

我有一个简单的React组件，应该使用highcharts-react库渲染两个Highcharts。图表的数据来自父组件的状态，并作为道具传递给该组件。页面加载时，饼图为空（例如，只有一个空的圆圈，没有序列）。如果使用React元素检查器检查HighchartsReact元素，则可以看到正确的数据包含在options属性中。另外，如果我手动更改检查器中的任何数据，该图表也会突然显示。我的猜测是，这与图表无法正确更新有关，但是我无法确切确定我做错了什么。

const sharedPlotOptions = {
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: null,
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %'
            }
        }
    },
    series: [{
        name: 'Countries',
        colorByPoint: true,
        data: []
    }]
}

export function CountryPopulationPlot(props) {
  let adultData = props.countries.map(country => ({
    name: country.name,
    y: country.population //TODO: use adult only data
  }))

  let allData = props.countries.map(country => ({
    name: country.name,
    y: country.population
  }))

  let adultPlotOptions = sharedPlotOptions
  adultPlotOptions.series[0].data = adultData

  let allPlotOptions = sharedPlotOptions
  allPlotOptions.series[0].data = allData

  return(
    <div>
      <HighchartsReact
        highcharts={Highcharts}
        options={adultPlotOptions}
        oneToOne={true}
      />
      <HighchartsReact
        highcharts={Highcharts}
        options={allPlotOptions}
      />
    </div>
  );
}

编辑：oneToOne道具试图修复该错误，但似乎没有任何作用。

Answer 1

在要显示饼图的Highcharts中，adultData和allData的格式应如下：

[
  {
    name: "USA",
    y: 1000
  },
  {
    name: "Italy",
    y: 500
  }
]

（或）

 [
  {
    "name": "USA",
    "y": 1000
  },
  {
    "name": "Italy",
    "y": 500
  }
]

请仔细检查您的输入数据。我在GitHub上写了一个博客文章和一个可运行的应用程序，其中有一个简单的Highcharts饼图示例。请检查：http://softwaredevelopercentral.blogspot.com/2020/03/react-highcharts-and-spring-boot.html

Highcharts反应在初始页面加载时不呈现

1 个答案: