[英]Show datalabels for spiderweb only when hovered over the line or the legend?
I am creating a spiderweb chart following the Highcharts guide. 我按照Highcharts指南创建了一个蜘蛛网图表。 Currently data label are enabled.
目前已启用数据标签。 I want to hide the data on load and only show the data when the user hovers over the line or hovers overs the legend.
我希望在加载时隐藏数据,只在用户将鼠标悬停在线上或悬停在图例上时显示数据。 How can I accomplish this?
我怎么能做到这一点?
Here is a link to my JSFiddle: http://jsfiddle.net/mmaharjan/fqrvq3m8/ 这是我的JSFiddle的链接: http : //jsfiddle.net/mmaharjan/fqrvq3m8/
$(function () {
$('#container').highcharts({
chart: {
polar: true,
type: 'line'
},
title: {
text: 'Hello World',
},
pane: {
size: '80%'
},
xAxis: {
categories: ['Sales', 'Marketing', 'Development', 'Customer Support',
'Information Technology', 'Administration'],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
max: 5,
labels: {
enabled: false,
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
}
}
},
legend: {
align: 'center',
verticalAlign: 'bottom',
layout: 'vertical'
},
series: [{
name: 'Allocated Budget',
data: [1, 2, 1, 3, 4],
pointPlacement: 'on'
}, {
name: 'Actual Spending',
data: [3, 4, 5, 3, 2],
pointPlacement: 'on'
}]
});
});
HTML: HTML:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>
My suggestion is to use the events mouseOver
and mouseOut
of the series
. 我的建议是使用事件,
mouseOver
和mouseOut
了的series
。 These will hide and show the data labels. 这些将隐藏和显示数据标签。 Then using the callback method when constructing the chart you can hide all the data labels by default and add additional events for hovering the legend items, utilizing the functionality of your
mouseOver
and mouseOut
. 然后在构造图表时使用回调方法,您可以默认隐藏所有数据标签,并使用
mouseOver
和mouseOut
的功能添加用于悬停图例项目的其他事件。
To illustrate, in your chart options you would have: 为了说明,您可以在图表选项中:
plotOptions: {
series: {
dataLabels: {
enabled: true
},
events: {
mouseOver: function(event) {
// Show all data labels for the current series
$.each(this.data, function(i, point){
point.dataLabel.show();
});
},
mouseOut: function(event) {
// Hide all data labels for the current series
$.each(this.data, function(i, point){
point.dataLabel.hide();
});
}
}
}
}
And your callback function would be: 你的回调函数是:
$('#container').highcharts({
// Options...
}, function(chart) {
// Hide data labels by default
$.each(chart.series, function(i, series) {
$.each(series.data, function(i, point){
point.dataLabel.hide();
});
});
// Add events for hovering legend items
$('.highcharts-legend-item').hover(function(e) {
chart.series[$(this).index()].onMouseOver();
},function() {
chart.series[$(this).index()].onMouseOut();
});
});
See this JSFiddle for a complete example. 有关完整示例,请参阅此JSFiddle 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.