Highchart 饼图，解构 dataLabels 并定义自定义格式化程序答案

【问题标题】：Highchart Pie chart, de-structure dataLabels and define custom formatterHighchart 饼图，解构 dataLabels 并定义自定义格式化程序
【发布时间】：2021-02-11 06:29:57
【问题描述】：

我在反应应用程序中使用 Highchart。我在配置文件中定义饼图配置，并在组件中使用。该组件负责使用带有动态值的更新图表配置来呈现高图表。

import {renderToString} from 'react-dom/server';
import {pieConfig} from './pieConfig';
import {Text} from './Text';

export const PieContainer = ({apiResponse}) => {
  const updatedPiConfig = {
    ...pieConfig,
    plotOptions: {
      pie: {
        dataLabels: {
          connectorShape: 'straight',
          distance: 20,
          style: {
            textOverflow: 'clip'
          },
          formatter: function() {
             return renderToString(<Text>{this.point.name}</Text>)
          }
        }
      }
    },
    series: [{data: apiResponse}]
  }
}

当我尝试解构 dataLabel 配置而不是像这样重新定义它们时，

...
dataLabel: {
  ...pieConfig.plotOptions.pie.dataLabels,
  formatter: function() {
    return renderToString(<Text>{this.point.name}</Text>)
  }
}

我的格式化程序给了我错误 - 属性点不存在于类型 '{formatter: () => any...

我尝试将格式化程序转换为箭头函数，但我无法在箭头函数中访问 point.name。

https://codesandbox.io/s/highcharts-react-demo-forked-r4pso

任何帮助或建议将不胜感激。

【问题讨论】：

你能用我可以处理的在线编辑器上的示例数据重现你的问题吗？
codesandbox.io/s/highcharts-react-demo-forked-r4pso@SebastianWędzel

标签： javascript charts highcharts react-highcharts

【解决方案1】：

请注意，Highcharts 回调不接受 JSX 组件。如果你想在 Highcharts 中使用 JSX 组件，看看这个例子 - https://gist.github.com/jon-a-nygaard/7d0253b2c73ae634d5804d6794a67c0c

不使用 JSX 的示例：https://codesandbox.io/s/highcharts-react-demo-forked-z13sh

【讨论】：