如何修改此代码http://jsfiddle.net/r6p7E/6/每次我选择时都能看到以相同颜色选择的部分?我希望只有当我点击它时它才变成黄色。
代码:
$(function () {
Highcharts.theme = {
colors: ['#242c4a'],
chart: {
width: 350,
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(240, 240, 255)']
]
},
},
};
// Apply the theme
Highcharts.setOptions(Highcharts.theme);
// Build the chart
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Our Projects'
},
plotOptions: {
pie: {
borderColor: '#48588c',
borderWidth: 7,
slicedOffset: 10,
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
}
},
series: {
point: {
events: {
select: function() {
}
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
dashStyle: 'LongDashDotDot',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
},
function(chart) { // on complete
var renderer = new Highcharts.Renderer(
$('#container')[0], 50, 50);
chart.renderer.circle(175, 216, 22).attr({
fill: '#e7e620',
'stroke-width': 5,
zIndex: 3
}).add();
}
);
});
最佳答案
这可能是你真正想要的。但根据你对这个 fiddle 的要求,你会得到:http://jsfiddle.net/r6p7E/8/
您可以将其更改为单击事件,而不是 mouseOver 事件:
point: {
events: {
click: function () {
this.graphic.attr({
fill: 'yellow'
});
}
}
},
当然,一旦您离开,mouseOut 事件就会杀死颜色,但我不确定这是否是您想要的,因为您没有提到它。
编辑:此 fiddle 保留黄色,直到取消选择(或选择另一个):http://jsfiddle.net/r6p7E/12/
allowPointSelect: true,
slicedOffset: 0,
point: {
events: {
select: function () {
this.update({color: 'yellow'});
},
unselect: function () {
this.update({color: '#CCCCCC'});
}
}
}
关于jquery - 当我点击此部分时,Highcharts 部分的饼图颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18389604/