我正在按照 Highcharts 指南创建蜘蛛网图表。当前数据标签已启用。我想在加载时隐藏数据,并且只在用户将鼠标悬停在线条上或悬停在图例上时显示数据。我怎样才能做到这一点?
这是我的 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:
<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>
最佳答案
我的建议是使用系列
的事件mouseOver
和mouseOut
。这些将隐藏和显示数据标签。然后在构建图表时使用回调方法,您可以默认隐藏所有数据标签,并添加额外的事件来悬停图例项目,利用 mouseOver
和 mouseOut
的功能.
为了说明,在您的图表选项中您将拥有:
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();
});
}
}
}
}
你的回调函数是:
$('#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();
});
});
参见 this JSFiddle一个完整的例子。
关于javascript - 仅当悬停在线条或图例上时才显示蜘蛛网的数据标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29856708/