Highchart Treemap - 圆形边缘

Question

我需要创建一个圆角树状图，如图所示

我试过：

更改 plotOptions.treemap.borderRadius 为每个框而不是整个地块设置半径。
使用chart.borderRadius对图表没有影响，我相信是这样，因为图表本身不会走到图表的边缘。
highcharts 的 rounded-corners 库不适用于树图。它适用于条形图

任何关于如何实现这一目标的指导都将受到赞赏。这里有一个jsfiddle的树状图供参考。

以下是我尝试过的选项

const options = {
        chart: {
            borderRadius: 20,
        },
        credits: {
          enabled: false,
        },
        tooltip: {
          enabled: false,
        },

        plotOptions: {
          treemap: {
            // borderRadiusBottomRight: 25,
            // borderRadiusBottomLeft: 25,
            borderWidth: 2,
            borderRadius: 5,
            borderColor: "#FFFFFF",
          
            },
          },
        series: [
          {
            type: "treemap",
            data: [{
                    id: 'A',
                    name: 'Apples',
                    color: "#EC2500",
                    value: 10,
                }, {
                    id: 'B',
                    name: 'Bananas',
                    color: "#ECE100",
                    value: 15,
                }, {
                    id: 'C',
                    name: 'Oranges',
                    color: '#EC9800',
                    value: 20,
                }],
          },
        ],
        title: {
          text: "",
        },
      },
    };

注：

图表中不需要图例或标题，如果可能的话可以将图表扩展到边缘
所有其他图表都是用 highcharts 制作的，我更愿意使用相同的树图而不是使用不同的库。
不需要drill-down。

Answer 1

您可以在 highcharts-series class 中添加一个 clip-path。

.highcharts-series {
  clip-path: inset(0% 0% 0% 0% round 15px);
}

https://jsfiddle.net/mqo78ah2/

您必须使 css 更具体，这样您就不会更改其他图表。

Highchart Treemap - 圆形边缘

Highchart Treemap - rounded edges

javascript

css

charts

highcharts