Highchart饼图，解构数据标签并定义自定义格式化程序 [英] Highchart Pie chart, de-structure dataLabels and define custom formatter

问题描述

我在React应用程序中使用Highchart.我在配置文件中定义了饼状配置，它在组件中使用.该组件负责通过使用具有动态值的更新的图表配置来渲染图表.

I am using Highchart in a react application. I am defining pie configs in a config file and it is used in a component. The component is responsible for rendering highchart by using updated chart config with dynamic values.

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配置而不是像这样重新定义它们时，

When I am trying to de-structure dataLabel configs instead of re-defining them like this,

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

我的格式化程序给我一个错误-类型'{formatter:()=>任何...

My formatter is giving me error that - Property point does not exist on type '{formatter: () => any...

我尝试将格式程序转换为箭头功能，但是无法访问箭头功能中的point.name.

I tried converting formatter to arrow function, but I am unable to access point.name inside arrow function.

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

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

Any help or suggestion will be appreciated.

推荐答案

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

Notice that Highcharts callbacks don't accept the JSX components. Take a look at this example if you want to use the JSX components in Highcharts - https://gist.github.com/jon-a-nygaard/7d0253b2c73ae634d5804d6794a67c0c

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

Example without using the JSX: https://codesandbox.io/s/highcharts-react-demo-forked-z13sh

这篇关于Highchart饼图，解构数据标签并定义自定义格式化程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！