React使用Highcharts为正负值柱形图分别设置顶部圆角

Highcharts 默认的全局 borderRadius 配置会统一作用于柱体两端，且负值柱的默认“顶部”为朝下的一端，直接设置全局圆角无法满足正负柱分别在靠近0点的一端设置圆角的需求，可通过以下方式实现：

方案1：使用内置圆角方向配置（适用于 Highcharts 9.0+ 版本，推荐） #

Highcharts 9.0 及以上版本支持 borderRadius.where 回调配置，可根据数据点数值动态判断圆角生效位置，React 中使用示例如下：

import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

const PositiveNegativeBarChart = () => {
  const chartOptions = {
    chart: {
      type: 'column'
    },
    yAxis: {
      min: -10,
      max: 10,
      title: {
        text: '数值'
      }
    },
    plotOptions: {
      column: {
        borderRadius: {
          radius: 4, // 自定义圆角大小
          where: (point) => {
            // 正值柱上端加圆角，负值柱靠近零点的一端加圆角
            return point.y >= 0 ? 'top' : 'bottom';
          }
        },
        // 可额外配置正负柱颜色区分
        colorByPoint: true,
        colors: ['#2ecc71', '#e74c3c', '#2ecc71', '#e74c3c']
      }
    },
    series: [
      {
        data: [6, -4, 9, -5, 3, -7]
      }
    ]
  };

  return <HighchartsReact highcharts={Highcharts} options={chartOptions} />;
};

export default PositiveNegativeBarChart;

方案2：低版本兼容方案 #

如果使用的是 9.0 以下版本的 Highcharts，可在单个数据点中单独配置圆角属性：

series: [
  {
    data: [
      { y: 6, borderRadius: 4, borderRadiusWhere: 'top' },
      { y: -4, borderRadius: 4, borderRadiusWhere: 'bottom' },
      { y: 9, borderRadius: 4, borderRadiusWhere: 'top' },
      { y: -5, borderRadius: 4, borderRadiusWhere: 'bottom' }
    ]
  }
]

以上两种方案均不需要修改DOM或引入额外插件，直接通过Highcharts原生配置即可实现需求。

内容的提问来源于stack exchange，提问作者Sandhya。