我需要创建一个圆角的树图,如图所示
我试过:
- 变更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: "",
},
},
};
注意事项:
1.图表中不需要图例或标题,如果可能,可以将绘图扩展到边缘
1.所有其他的图表都是用highcharts制作的,我更喜欢用同样的图表来制作树形图,而不是用不同的库来制作。
1.不需要深入查看。
1条答案
按热度按时间x759pob21#
可以将
clip-path
添加到highcharts-series
类中。https://jsfiddle.net/mqo78ah2/
你必须使css更具体,这样你就不会改变你的其他图表。