0
ハイチャートにマウスでデータラベルを表示する方法を教えてください。実際には、選択したアイテムにデータラベルを表示し、他のデータラベルを非表示にしたい 。 Iマウスは、任意のスライスの上に、それはそれにデータラベルを表示し、他のデータを非表示lables場合、私のマウスは、青色のスライスの上にのみ55を表示.IT言い換えれば はここ ハイチャートでマウスでデータラベルを表示する方法は？
は私のコード http://jsfiddle.net/nyhmdtb8/9/$(function() {
var colors= [
'#0066FF',
'#33CC33',
'#FF0000',
'#FFFF00',
];
$('#container').highcharts({
chart: {
type: 'pie'
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
legend: {
symbolHeight: 1,
symbolWidth: 1,
symbolRadius: 0,
useHTML: true,
align: 'right',
verticalAlign: 'top',
itemWidth: 100,
layout: 'vertical',
x: 0,
y: 100,
labelFormatter: function() {
return '<div style="padding:5px;width:55px;background-color:' + this.color + '"><span style="color: #ffffff;">' + this.name + ': <b>' + this.y + '</b> </span></div> </n>';
}
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
pie: {
showInLegend: true,
dataLabels: {
format: '<b>{point.y}</b>',
style: {
fontWeight: 'bold',
color: 'white'
}
},
point: {
events: {
legendItemClick: function() {
return false;
},
mouseOver: function(e) {
var series = this.series;
console.log(series)
for (var i = 0; i < series.data.length; i++) {
var point = series.data[i];
console.log(point)
if (point == this) {
console.log('yes')
point.update({color: series.chart.options.colors[this.index]});
} else {
point.update({
color: '#CCCCCC'
});
}
}
return false;
},
mouseOut: function(e) {
var series = this.series;
console.log(series)
for (var i = 0; i < series.data.length; i++) {
var point = series.data[i];
point.update({color: series.chart.options.colors[i]});
}
return false;
}
}
},
startAngle: 0,
endAngle: 270,
}
},
tooltip: {
enabled: false,
shadow: false
},
series: [{
states: {
hover: {
enabled: false
}
},
showInLegend: false,
name: 'election result',
enabled: true,
dataLabels: {
enabled: true
},
data: [
['A', 55],
['B', 65],
],
size: '30%',
innerSize: '70%',
}, {
states: {
hover: {
enabled: false
}
},
name: 'Versions',
data: [
['sdsd', 55],
['sdf', 65],
['sdf', 65],
['sdf', 132],
],
size: '70%',
innerSize: '80%',
}]
},function(chart){
$(chart.series[1].data).each(function(i, serie) {
$(serie.legendItem.element).hover(function() {
// alert('--dd--')
mouseOverEvent(chart.series[1].data, serie.index, true);
}, function() {
alert('----');
mouseOutEvent(chart.series[1].data, serie.index);
});
});
function mouseOverEvent(series, index, hide) {
for (var i = 0; i < series.length; i++) {
if (index == i) {
series[i].update({color: colors[i]});
} else {
series[i].update({
color: '#CCCCCC'
});
}
}
}
function mouseOutEvent(series, index, hide) {
for (var i = 0; i < series.length; i++) {
series[i].update({color:colors[i]});
}
}
});
});
例ですデータラベル、残りは非表示になり、ときに私のマウスうち、すべてのラベルが再び
質問は重複しています。私はこれを必要とします。私は必要な色を更新するには、[ここ]からの回答を参照してください（http://stackoverflow.com/questions/41691424/why-line-is-not-display-in-highcharts） – morganfree