Javascript 如何在hightcharts中添加悬停效果？
我们可以在hightcharts（圆环图）中添加悬停效果吗？我们可以在给定url中显示的圆环图中添加悬停效果吗 请检查上面的链接并悬停任何一个切片。它会使所选切片变暗，并使另一个切片变灰，效果与图例中相同 我们能用海图吗 这是密码Javascript 如何在hightcharts中添加悬停效果？,javascript,jquery,highcharts,Javascript,Jquery,Highcharts,我们可以在hightcharts（圆环图）中添加悬停效果吗？我们可以在给定url中显示的圆环图中添加悬停效果吗 请检查上面的链接并悬停任何一个切片。它会使所选切片变暗，并使另一个切片变灰，效果与图例中相同 我们能用海图吗 这是密码 $（函数（）{ Highcharts.chart（'容器'{ 图表：{ plotBackgroundColor:null， 绘图边框宽度：0， plotShadow:false }, 标题：{ 文本：“浏览器共享2015”， 对齐：'居中'， 垂直排列：'中间'，
$（函数（）{
Highcharts.chart（'容器'{
图表：{
plotBackgroundColor:null，
绘图边框宽度：0，
plotShadow:false
},
标题：{
文本：“浏览器
共享
2015”，
对齐：'居中'，
垂直排列：'中间'，
y:40
},
工具提示：{
pointFormat:“{series.name}:{point.percentage:.1f}%”
},
打印选项：{
馅饼：{
数据标签：{
启用：对，
距离：-50，
风格：{
fontWeight:'粗体'，
颜色：“白色”
}
},
startAngle:-90，
端角：90，
中间：['50%，'75%']
}
},
系列：[{
键入“pie”，
名称：“浏览器共享”，
内部尺寸：“50%”，
数据：[
[Firefox'，10.38]，
[IE'，56.33]，
[Chrome'，24.03]，
[Safari'，4.77]，
[Opera'，0.91]，
{
名称：“专有或不可检测”，
y:0.2，
数据标签：{
已启用：false
}
}
]
}]
});
});
var hc = Highcharts.chart(...
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
}
}
}
}
}
$（函数（）{
$(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;
}
});
var hc=Highcharts.chart（'容器'{
图表：{
plotBackgroundColor:null，
绘图边框宽度：0，
plotShadow:false
},
标题：{
文本：“浏览器
共享
2015”，
对齐：'居中'，
垂直排列：'中间'，
y:40
},
工具提示：{
pointFormat:“{series.name}:{point.percentage:.1f}%”
},
打印选项：{
馅饼：{
要点：{
活动：{
鼠标悬停：函数（ev）{
hc.series[0].points.forEach(
职能（一）{
如果（电动目标！==i）{
if（i.color.indexOf（'rgba'）<0）{
i、 更新（{color:convertHex（i.color）+”，0.1）”）；
}否则{
i、 更新（{color:i.color.replace（'1'，'0.1'））；
}
}
}
)
},
鼠标输出：功能（ev）{
hc.series[0].points.forEach(
职能（一）{
i、 更新（{color:i.color.replace（'0.1'，'1'））；
}
)
}
}
},
国家：{
悬停：{
光环：{
尺码：9，
不透明度：0.75
}
}
},
数据标签：{
启用：对，
距离：-50，
风格：{
fontWeight:'粗体'，
颜色：“白色”
}
},
startAngle:-90，
端角：90，
中间：['50%，'75%']
}
},
系列：[{
键入“pie”，
名称：“浏览器共享”，
内部尺寸：“50%”，
数据：[
[Firefox'，10.38]，
[IE'，56.33]，
[Chrome'，24.03]，
[Safari'，4.77]，
[Opera'，0.91]，
{
名称：“专有或不可检测”，
y:0.2，
数据标签：{
已启用：false
}
}
],
颜色：['rgba（12181236,1）''rgba（247181236,1）''rgba（12813323,1）''rgba（241,92128,1）''rgba（24181236,1）''rgba（247181236,1）'
}]
});
函数转换十六进制（十六进制）{
十六进制=十六进制。替换（'#'，''）；
r=parseInt（十六进制子串（0,2），16）；
g=parseInt（十六进制子串（2,4），16）；
b=parseInt（十六进制子串（4,6），16）；
结果='rgba（'+r+'、'+g+'、'+b+'；
返回结果；
}
});
下面是一个完整的示例，说明了您希望仅使用Highcharts库在纯JavaScript中实现的功能
const chart=Highcharts.chart（'container'{
图表：{
活动：{
负载（）{
colorAllGray.呼叫（此）
}
}
},
打印选项：{
系列：{
要点：{
活动：{
鼠标盖（e）{
colorAllGray.call（图表）
e、 target.update({
颜色：Highcharts.getOptions（）.colors[e.target.index]
})
},
mouseOut（）{
colorAllGray.call（图表）
}
}
},
},
},
系列：[{
键入“pie”，
名称：“浏览器共享”，
内部尺寸：“50%”，
数据：[
[Firefox'，10.38]，
[IE'，56.33]，
[Chrome'，24.03]，
[Safari'，4.77]，
[Opera'，0.91]{
名称：“专有或不可检测”，
y:0.2，
数据标签：{
已启用：false
}
}
]
}]
})
函数colorAllGray（）{
这
$(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;
}
});