highcharts Highchart树状图-圆角边缘

roqulrg3  于 2022-11-11  发布在  Highcharts
关注(0)|答案(1)|浏览(234)

我需要创建一个圆角的树图,如图所示

我试过:

任何关于如何实现这一点的方向都是值得赞赏的。这里有一个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.图表中不需要图例或标题,如果可能,可以将绘图扩展到边缘
1.所有其他的图表都是用highcharts制作的,我更喜欢用同样的图表来制作树形图,而不是用不同的库来制作。
1.不需要深入查看。

x759pob2

x759pob21#

可以将clip-path添加到highcharts-series类中。

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

https://jsfiddle.net/mqo78ah2/
你必须使css更具体,这样你就不会改变你的其他图表。

相关问题