Highchart 树形图 - 圆角边缘
我需要创建一个带有圆角的树状图，如图所示
我尝试过：
更改 plotOptions.treemap.borderRadius 设置每个框而不是整个图的半径。< /p>
使用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: "",
},
},
};
注意：
- 图表中不需要图例或标题，如果可能的话，绘图可以扩展到边缘
- 所有其他图表都是用 highcharts 制作的，更喜欢使用相同的树图而不是使用不同的库为了它。
- 无需向下钻取。
I need to create a treemap with round corners as shown in the image
I have tried:
Changing plotOptions.treemap.borderRadius set the radius for each box instead of the entire plot.
Using chart.borderRadius has no impact on the graph, I believe it is so because the plot itself is not going till the edge of the chart.
The rounded-corners library by highcharts does not work with treemaps. It is working well with bar charts
Any direction on how to achieve this is appreciated. Here's a jsfiddle of treemap for reference.
Here are options I have tried
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: "",
},
},
};
Note:
- Legend or title is not required in the chart, the plot can be extended to the edges if possible
- All other charts are made with highcharts, would prefer doing the treemap with the same instead of using a different library for it.
- No drill-down is required.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您可以将
clip-path添加到highcharts-series类。https://jsfiddle.net/mqo78ah2/
您必须使 css 更加具体，以便您不要更改您的其他图表。
You can add a
clip-pathto thehighcharts-seriesclass.https://jsfiddle.net/mqo78ah2/
You'll have to make the css more specific, so that you don't change your other charts.