Highcharts:在图例悬停时显示工具提示
Highcharts: Show tooltip on legend hover
我的 Highchart 如下所示,有没有办法在图例悬停时显示工具提示,就像我们悬停在切片上一样。
https://plnkr.co/edit/yzXLz7AIDoWa1Pzxxl4k?p=preview
我的工具提示代码:
tooltip: {
positioner: function(x, y){
var center = this.chart.series[0].center;
console.log(this, arguments);
return { x: center[0] - x/2, y: center[1] + y/2 };
},
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ Math.round(this.percentage*100)/100 + ' %';
}
}
您已经在代码中添加了 bootstrap,因此请使用 Bootstrap tooltip 并在您的图表加载函数中添加以下代码,
var legend = chart.legend;
for (var i = 0, len = legend.allItems.length; i < len; i++) {
(function(i) {
var t=legend.allItems[i],
content= '<b>'+ t.name +'</b>: '+ Math.round(t.percentage*100)/100 + ' %';
jQuery($(t.legendItem.element)).tooltip({title:content,html:true});
})(i);
}
您可以使用 Black Label 的 自定义事件 插件,计算点击标签的索引并使用 tooltip.refresh()
方法显示工具提示。
var options = {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
],
labels: {
events: {
click () {
const label = this
const chart = this.chart
const data = this.axis.series[0].data
const { categories } = this.axis
const i = categories.indexOf(label.value)
if (i !== -1) chart.tooltip.refresh(data[i])
},
}
}
},
series: [{
minPointLength: 10,
data: [900, 0.1],
type: 'column'
}]
}
var chart = Highcharts.chart('container', options)
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://blacklabel.github.io/custom_events/js/customEvents.js"></script>
<div id="container"></div>
我实际上是用带有鼠标悬停事件的模态实现的,这就是你可以做到这一点的方法,请在你的图表函数中插入这段代码:
$('#chart_container').on('mouseenter','.highcharts-legend-item',function(event) {
var seriesName = $(this).text();
if (seriesName === "this_series_name") {
$('#myModal').modal('toggle');
}
});
然后你可以制作一个模式 div 以像下面这样的悬停事件打开
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">Note</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
your message here
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Ok
</button>
</div>
</div>
</div>
</div>
这是一个demo
我的 Highchart 如下所示,有没有办法在图例悬停时显示工具提示,就像我们悬停在切片上一样。 https://plnkr.co/edit/yzXLz7AIDoWa1Pzxxl4k?p=preview
我的工具提示代码:
tooltip: {
positioner: function(x, y){
var center = this.chart.series[0].center;
console.log(this, arguments);
return { x: center[0] - x/2, y: center[1] + y/2 };
},
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ Math.round(this.percentage*100)/100 + ' %';
}
}
您已经在代码中添加了 bootstrap,因此请使用 Bootstrap tooltip 并在您的图表加载函数中添加以下代码,
var legend = chart.legend;
for (var i = 0, len = legend.allItems.length; i < len; i++) {
(function(i) {
var t=legend.allItems[i],
content= '<b>'+ t.name +'</b>: '+ Math.round(t.percentage*100)/100 + ' %';
jQuery($(t.legendItem.element)).tooltip({title:content,html:true});
})(i);
}
您可以使用 Black Label 的 自定义事件 插件,计算点击标签的索引并使用 tooltip.refresh()
方法显示工具提示。
var options = {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
],
labels: {
events: {
click () {
const label = this
const chart = this.chart
const data = this.axis.series[0].data
const { categories } = this.axis
const i = categories.indexOf(label.value)
if (i !== -1) chart.tooltip.refresh(data[i])
},
}
}
},
series: [{
minPointLength: 10,
data: [900, 0.1],
type: 'column'
}]
}
var chart = Highcharts.chart('container', options)
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://blacklabel.github.io/custom_events/js/customEvents.js"></script>
<div id="container"></div>
我实际上是用带有鼠标悬停事件的模态实现的,这就是你可以做到这一点的方法,请在你的图表函数中插入这段代码:
$('#chart_container').on('mouseenter','.highcharts-legend-item',function(event) {
var seriesName = $(this).text();
if (seriesName === "this_series_name") {
$('#myModal').modal('toggle');
}
});
然后你可以制作一个模式 div 以像下面这样的悬停事件打开
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">Note</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
your message here
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Ok
</button>
</div>
</div>
</div>
</div>
这是一个demo