如何在 highcharts 的图例框下方添加文本链接
Posted
技术标签:
【中文标题】如何在 highcharts 的图例框下方添加文本链接【英文标题】:How can I add a text link just below the legend box in highcharts 【发布时间】:2020-07-09 11:47:34 【问题描述】:我想在饼图垂直图例的最后一项下方添加一个文本链接。 我曾尝试在 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
]
]
);
【问题讨论】:
【参考方案1】:您可以使用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
【讨论】:
【参考方案2】:在labelFormatter
函数中,您可以访问this
。
? 作为提示,如果您在函数内使用
console.log(this)
,它将在调试器控制台中显示您可以访问的所有内容。
对于您的情况,如果您想知道您是否在最后一个图例项上,您可以将this.index
(图例的索引)与this.series.data.length - 1
(数据项的数量... -1 是因为索引偏移为零)。
工作示例:https://codesandbox.io/s/javascript-***-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;
我为链接添加了一些样式,使它看起来像一个链接,否则它看起来像图例的其他元素。
【讨论】:
谢谢,非常适合在最后一项之后显示额外的文本,但链接不起作用,它仅用作启用和禁用饼图的最后一项的链接。看看它在链接上的样子。 jsfiddle.net/Le48f1ay有没有办法解决这个问题?以上是关于如何在 highcharts 的图例框下方添加文本链接的主要内容,如果未能解决你的问题,请参考以下文章