我必须做一些自定义,如: 1.在饼图切片上移除鼠标上的手形指针。 2.在大/大切片内显示标签。 3.在mouseover / mouseout上点亮相应的div。
参考img: 这是jsfiddle,我已经努力实现3点: 在鼠标上我可以突出显示所选,但鼠标输出无法删除颜色
HTML
<div class="grid_5">
<div class="grid_4" id="top_states_chart" style="min-width: 200px; height: 200px; margin: 0 auto"></div>
<div class="grid_4 right">
<div class="Others level1">Maharastra</div>
<div class="Firefox level2">Karnataka</div>
<div class="level3">Gujarat</div>
<div class="level4">Tamil Nadu</div>
<div class="level5">Madhya Pradesh</div>
</div>
</div>
jQquery
$(function () {
var chart;
Highcharts.setOptions({
colors: ['#fffccc', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
$(document).ready(function () {
// Build the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'top_states_chart',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: ''
},
tooltip: {
//pointFormat: '',//{series.name}: <b>{point.percentage}%</b>
//percentageDecimals: 1
formatter: function() {
return false;
}
},
plotOptions: {
pie: {
allowPointSelect: false,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: false,
point: {
events: {
mouseOver: function(event) {
var point = this;
$('div.'+point.name).css({'background-color':'green', 'cursor':'pointer'});
}
}
},
events: {
mouseOut: function() {
//pieChart.tooltip.hide();
var point = this;
$('div.'+point.name).css({'background-color':'none', 'cursor':'pointer'});
}
}
}
},
series: [{
type: 'pie',
data: [
['Firefox', 45.0],
['Others', 55.7]
]
}]
});
});
});
http://jsfiddle.net/XErNG/135/
请看一下这个js代码。
谢谢
答案 0 :(得分:0)
使用mouseOver
和mouseOut
作为活动
使用togleClass
切换样式。
pie: {
allowPointSelect: false,
stickTracking: false,
// solves problem 1
cursor: 'normal',
// the following solves problem 2
dataLabels: {
enabled: false,
formatter: function () {
return this.y;
},
distance: -30
},
// the following solves problem 3
point: {
events: {
mouseOver: function() {
$('div.' + this.name).addClass('highlight');
},
mouseOut: function() {
$('div.' + this.name).removeClass('highlight');
}
}
}
}
然后你的系列日期应为:
data: [
['Firefox', 45.0],
{
name: 'Others',
y: 55.7,
dataLabels: {
enabled: true
}
}
]
的CSS
.highlight {
background-color: red;
}