Highchart 饼图,解构数据标签并定义自定义格式化程序
Highchart Pie chart, de-structure dataLabels and define custom formatter
我在 React 应用程序中使用 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>)
}
}
我的格式化程序给我的错误是 - 属性 point does not exist on type '{formatter: () => any...
我尝试将格式化程序转换为箭头函数,但我无法访问箭头函数内部的 point.name。
https://codesandbox.io/s/highcharts-react-demo-forked-r4pso
如有任何帮助或建议,我们将不胜感激。
请注意,Highcharts 回调不接受 JSX 组件。如果您想在 Highcharts 中使用 JSX 组件,请查看此示例 - https://gist.github.com/jon-a-nygaard/7d0253b2c73ae634d5804d6794a67c0c
不使用 JSX 的示例:https://codesandbox.io/s/highcharts-react-demo-forked-z13sh
我在 React 应用程序中使用 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>)
}
}
我的格式化程序给我的错误是 - 属性 point does not exist on type '{formatter: () => any...
我尝试将格式化程序转换为箭头函数,但我无法访问箭头函数内部的 point.name。
https://codesandbox.io/s/highcharts-react-demo-forked-r4pso
如有任何帮助或建议,我们将不胜感激。
请注意,Highcharts 回调不接受 JSX 组件。如果您想在 Highcharts 中使用 JSX 组件,请查看此示例 - https://gist.github.com/jon-a-nygaard/7d0253b2c73ae634d5804d6794a67c0c
不使用 JSX 的示例:https://codesandbox.io/s/highcharts-react-demo-forked-z13sh