如何将工具提示添加到高图表中的图例中

Question

有什么方法可以将工具提示添加到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
}]
}]

})；

谢谢。

Answer 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>