我们可以在hightcharts（圆环图）中添加悬停效果..我们可以在给定网址中显示的圆环图中添加悬停效果
http://c3js.org/samples/chart_donut.html
请检查上面的链接并悬停任何切片。黑暗选定的切片并将其他灰色作为传奇中的相同效果
我们可以在highcharts中做什么
这是代码 http://jsfiddle.net/sk0603wj/
$(function () {
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Browser<br>shares<br>2015',
align: 'center',
verticalAlign: 'middle',
y: 40
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white'
}
},
startAngle: -90,
endAngle: 90,
center: ['50%', '75%']
}
},
series: [{
type: 'pie',
name: 'Browser share',
innerSize: '50%',
data: [
['Firefox', 10.38],
['IE', 56.33],
['Chrome', 24.03],
['Safari', 4.77],
['Opera', 0.91],
{
name: 'Proprietary or Undetectable',
y: 0.2,
dataLabels: {
enabled: false
}
}
]
}]
});
});
答案 0 :(得分：0)
可以做到，但不是很直接。在这里你可以看到这个的构建块：
http://jsfiddle.net/3ehrgge7/2/
1）你需要记住对图表的引用
var hc = Highcharts.chart(...
2）然后，您可以在元素上使用mouseOver和mouseOut事件来修改系列的点。这是鼠标悬停事件的一个示例，除了悬停项目之外的所有项目都将颜色更新为某些内容。
plotOptions: {
pie: {
point:{
events:{
mouseOver:function(ev){
hc.series[0].points.forEach(
function(i){
if(ev.target !== i ){
i.update({color:'rgba(150,100,50,0.1)'});
}
}
)
}
}
},
states: {
hover: {
halo: {
size: 9,
opacity: 0.75
}
}
}
}
}
3）为了达到理想的效果，你必须有一个颜色表，你将分配给你的点。
我希望，这有帮助。
答案 1 :(得分：0)
$(function () {
var hc = Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Browser<br>shares<br>2015',
align: 'center',
verticalAlign: 'middle',
y: 40
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
point:{
events:{
mouseOver:function(ev){
hc.series[0].points.forEach(
function(i){
if(ev.target !== i ){
if(i.color.indexOf('rgba') < 0) {
i.update({color: convertHex(i.color) + ",0.1)"});
}else{
i.update({color: i.color.replace('1)', '0.1)')});
}
}
}
)
},
mouseOut:function(ev){
hc.series[0].points.forEach(
function(i){
i.update({color: i.color.replace('0.1','1')});
}
)
}
}
},
states: {
hover: {
halo: {
size: 9,
opacity: 0.75
}
}
},
dataLabels: {
enabled: true,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white'
}
},
startAngle: -90,
endAngle: 90,
center: ['50%', '75%']
}
},
series: [{
type: 'pie',
name: 'Browser share',
innerSize: '50%',
data: [
['Firefox', 10.38],
['IE', 56.33],
['Chrome', 24.03],
['Safari', 4.77],
['Opera', 0.91],
{
name: 'Proprietary or Undetectable',
y: 0.2,
dataLabels: {
enabled: false
}
}
],
color: ['rgba(12,181,236,1)', 'rgba(247,181,236,1)', 'rgba(128,133,233,1)', 'rgba(241,92,128,1)', 'rgba(241,181,236,1)', 'rgba(247,181,236,1)']
}]
});
function convertHex(hex){
hex = hex.replace('#','');
r = parseInt(hex.substring(0,2), 16);
g = parseInt(hex.substring(2,4), 16);
b = parseInt(hex.substring(4,6), 16);
result = 'rgba('+r+','+g+','+b+'';
return result;
}
});
答案 2 :(得分：0)
以下是仅使用Highcharts库在纯JavaScript中实现的完整示例。
const chart = Highcharts.chart('container', {
chart: {
events: {
load () {
colorAllGray.call(this)
}
}
},
plotOptions: {
series: {
point: {
events: {
mouseOver(e) {
colorAllGray.call(chart)
e.target.update({
color: Highcharts.getOptions().colors[e.target.index]
})
},
mouseOut() {
colorAllGray.call(chart)
}
}
},
},
},
series: [{
type: 'pie',
name: 'Browser share',
innerSize: '50%',
data: [
['Firefox', 10.38],
['IE', 56.33],
['Chrome', 24.03],
['Safari', 4.77],
['Opera', 0.91], {
name: 'Proprietary or Undetectable',
y: 0.2,
dataLabels: {
enabled: false
}
}
]
}]
})
function colorAllGray() {
this.series[0].points.forEach(function(point) {
point.update({
color: 'rgba(150,100,50,0.1)'
})
})
}<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 500"></div>