Highchart 树形图 - 圆角边缘

Question

我需要创建一个带有圆角的树形图，如图所示

我努力了：

• 更改plotOptions.treemap.borderRadius设置每个框而不是整个图的半径。

• 使用chart.borderRadius对图表没有影响，我相信是这样，因为绘图本身不会到达图表的边缘。

• highcharts 的圆角库不适用于树形图。它与条形图配合良好

任何有关如何实现这一目标的指导都值得赞赏。这是一个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: "",
        },
      },
    };

笔记：

1. 图表中不需要图例或标题，如果可能，绘图可以延伸到边缘
2. 所有其他图表都是用 highcharts 制作的，更喜欢使用相同的树形图而不是使用不同的库。
3. 无需向下钻取。

Answer 1

clip-path您可以向班级添加一个highcharts-series。

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

https://jsfiddle.net/mqo78ah2/

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