如何在highcharts中为图例添加工具提示
Posted
技术标签:
【中文标题】如何在highcharts中为图例添加工具提示【英文标题】:how to add tool tip to legends in highcharts 【发布时间】:2021-12-18 01:04:42 【问题描述】:有什么方法可以在 Highcharts 中为图例添加工具提示?
在示例 (https://jsfiddle.net/bdkxzf6t/) 中,当我们将鼠标悬停在下面饼图中的 Chrome、Internet Explorer、Firefox、Edge 图例上时,我们可以定义工具提示吗?
series: [
name: 'Brands',
colorByPoint: true,
data: [
name: 'Chrome',
name2: 'Google Chrome',
y: 61.41,
sliced: true,
selected: true
,
name: 'Internet Explorer',
name2: 'IE',
y: 11.84
,
name: 'Firefox',
name2: 'FF',
y: 10.85
,
name: 'Edge',
name2: 'MSE',
y: 4.67
,
name: 'Safari',
name2: 'AS',
y: 4.18
,
name: 'Unknown',
name2: 'NA',
y: 7.05
]
]
);
谢谢。
【问题讨论】:
你也可以尝试使用这种方式:***.com/questions/54683867/… 【参考方案1】://you need to add event in your code as shown below:
// you can change the tooltip position location if you'd like
// Build the chart
Highcharts.chart('container',
chart:
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
//------------------------
events:
load: function ()
let chart = this,
legend = chart.legend;
for (let i = 0, len = legend.allItems.length; i < len; i++)
(function (i)
let item = legend.allItems[i].legendItem;
item.on('mouseover', function (e)
chart.tooltip.refresh([chart.series[0].points[i]]);
).on('mouseout', function (e)
//chart.options.tooltip.enabled = false;
chart.render();
);
)(i);
//------------------------
,
title:
text: 'Browser market shares in January, 2018'
,
tooltip:
pointFormat: 'series.name:HESAM <b>point.percentage:.1f%</b>'
,
accessibility:
point:
valueSuffix: '%'
,
plotOptions:
pie:
allowPointSelect: true,
cursor: 'pointer',
dataLabels:
enabled: true,
format: '<b>point.name2</b>: point.percentage:.1f %'
,
showInLegend: true
,
series: [
name: 'Brands',
colorByPoint: true,
data: [
name: 'Chrome',
name2: 'Google Chrome',
y: 61.41,
sliced: true,
selected: true
,
name: 'Internet Explorer',
name2: 'IE',
y: 11.84
,
name: 'Firefox',
name2: 'FF',
y: 10.85
,
name: 'Edge',
name2: 'MSE',
y: 4.67
,
name: 'Safari',
name2: 'AS',
y: 4.18
,
name: 'Unknown',
name2: 'NA',
y: 7.05
]
]
);
.highcharts-figure,
.highcharts-data-table table
min-width: 320px;
max-width: 660px;
margin: 1em auto;
.highcharts-data-table table
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #ebebeb;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
.highcharts-data-table caption
padding: 1em 0;
font-size: 1.2em;
color: #555;
.highcharts-data-table th
font-weight: 600;
padding: 0.5em;
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption
padding: 0.5em;
.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even)
background: #f8f8f8;
.highcharts-data-table tr:hover
background: #f1f7ff;
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
This pie chart shows how the chart legend can be used to provide
information about the individual slices.
</p>
</figure>
【讨论】:
以上是关于如何在highcharts中为图例添加工具提示的主要内容,如果未能解决你的问题,请参考以下文章