如何在高图表中的图例框下方添加文本链接

Question

我想在饼图上垂直图例的最后一项下方添加一个文本链接。我尝试过在LabelFormatter中使用一个函数，但没有使用javascript来完成所需的函数。有人能帮我完成这件事吗？

Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares in January, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
accessibility: {
point: {
valueSuffix: '%'
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
labelFormatter: function() {
if (this.isLast) {
return this + "<br> <a href="link">Text</a>";
}
},
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Chrome',
y: 61.41,
sliced: true,
selected: true
}, {
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}, {
name: 'Edge',
y: 4.67
}, {
name: 'Safari',
y: 4.18
}, {
name: 'Other',
y: 7.05
}]
}]
});

Answer 1

在labelFormatter函数中，您可以访问this。

作为提示，如果在函数中使用console.log(this)，它将在调试器控制台中显示您可以访问的所有内容。

对于您的情况，如果您想知道您是否在最后一个图例项上，可以将this.index(图例的索引)与this.series.data.length - 1(数据项的数量…-1是因为索引偏移为零)进行比较。

工作示例：https://codesandbox.io/s/javascript-stackoverflow-60908009-o3ftp

labelFormatter: function() {
// if current legend is the last one
// display the legend name
// followed by a link on a second line
if (this.index === this.series.data.length - 1) {
return (
this.name +
'<br> <a style="color: #0c6def; text-decoration: underline;" href="link">Clickable link!</a>'
);
}
// otherwise just display the legend name
return this.name;
}

我为链接添加了一些样式，使其看起来像一个链接，否则它看起来像图例的其他元素。

Answer 2

您可以使用Highcharts. SVGRenderer类添加链接。例如：

events: {
load: function() {
var legend = this.legend,
legendGroup = legend.group;
this.renderer.text(
'<a href="https://www.google.pl/">Google</a>',
legendGroup.translateX + legend.padding,
legendGroup.translateY + legend.legendHeight + legend.padding,
true
).add();
}
}

---

现场演示：http://jsfiddle.net/BlackLabel/6m4e8x0y/4953/

API参考：https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text