我试图隐藏标签并在鼠标移开时更改边框宽度,并在鼠标移出时将图形返回到其原始状态。 "未捕获的TypeError:无法读取属性'状态'未定义"继续展示,我不知道该怎么做。
var showLabel = function () {
var options = myChart.options;
options.xAxis[0].labels.enabled = true;
options.plotOptions.series.borderWidth = 0;
myChart = new Highcharts.Chart(options);
};
var hideLabel = function () {
var options = myChart.options;
options.xAxis[0].labels.enabled = false;
options.plotOptions.series.borderWidth = 3;
myChart = new Highcharts.Chart(options);
};
// Make monochrome colors and set them as default for all pies
Highcharts.getOptions().plotOptions.bar.colors = (function () {
var colors = [],
base = Highcharts.getOptions().colors[0],
i;
for (i = 0; i < 10; i += 1) {
// Start out with a darkened base color (negative brighten), and end
// up with a much brighter color
colors.push(Highcharts.Color(base).brighten((i - 3) / 7).get());
}
return colors;
}());
var myChart = new Highcharts.Chart({
chart: {
renderTo: 'graph_capt',
type: 'bar',
backgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
},
credits:false,
exporting:false,
title: {
text: ''
},
xAxis: {
categories:['Captação'],
labels: {
//AQUI
enabled:true,
x: 80,
y: 5,
style:{
color: '#ffffff',
fontSize: '12pt',
},
},
tickWidth: 0,
tickColor: '#000000',
gridColor: '#000000',
gridLineWidth: 0,
lineWidth: 0,
visible: true,
},
yAxis: {
labels: {
enabled:false
},
min: 0,
gridLineWidth: 0,
title: {
text: ''
}
},
tooltip: {
pointFormat: '<span style="color:black">{series.name}</span>: <b>R$ {point.y}</b> ({point.percentage:.0f}%)<br/>',
shared: false,
},
legend: {
enabled:false,
},
plotOptions: {
bar: {
stacking: 'percent',
allowPointSelect: true,
colorByPoint: true,
cursor: 'pointer'
},
series: {
stickyTracking: false,
borderColor: '#000000',
//AQUI
borderWidth: 0,
events: {
mouseOver: function (event) {
console.log('Mouse over');
return hideLabel();
},
mouseOut: function () {
console.log('Moused out');
return showLabel();
}
}
},
},
series: [{
name: 'Poupança',
data: [1000000]
}, {
name: 'Letras',
data: [75000.75]
}, {
name: 'Fundos',
data: [50545.49]
}]
});
答案 0 :(得分:0)
您应该使用axis.update和series.update动态更新图表,而不是在每个鼠标事件上重新创建图表。
获取图表容器而不是系列也会更好,因为你想要更改图表和系列。
示例:https://jsfiddle.net/aythcvop/
$(function() {
var showLabel = function(chart) {
chart.xAxis[0].update({
labels: {
enabled: true
}
}, false);
Highcharts.each(chart.series, function(series) {
series.update({
borderWidth: 0
}, false);
});
chart.redraw();
//options.xAxis[0].labels.enabled = true;
//options.plotOptions.series.borderWidth = 0;
//myChart = new Highcharts.Chart(options);
};
var hideLabel = function(chart) {
chart.xAxis[0].update({
labels: {
enabled: false
}
}, false);
Highcharts.each(chart.series, function(series) {
series.update({
borderWidth: 3
}, false);
});
chart.redraw();
//options.xAxis[0].labels.enabled = false;
//options.plotOptions.series.borderWidth = 3;
//myChart = new Highcharts.Chart(options);
};
// Make monochrome colors and set them as default for all pies
Highcharts.getOptions().plotOptions.bar.colors = (function() {
var colors = [],
base = Highcharts.getOptions().colors[0],
i;
for (i = 0; i < 10; i += 1) {
// Start out with a darkened base color (negative brighten), and end
// up with a much brighter color
colors.push(Highcharts.Color(base).brighten((i - 3) / 7).get());
}
return colors;
}());
var myChart = new Highcharts.Chart({
chart: {
renderTo: 'graph_capt',
type: 'bar',
backgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
},
credits: false,
exporting: false,
title: {
text: ''
},
xAxis: {
categories: ['Captação'],
labels: {
//AQUI
enabled: true,
x: 80,
y: 5,
style: {
color: '#ffffff',
fontSize: '12pt',
},
},
tickWidth: 0,
tickColor: '#000000',
gridColor: '#000000',
gridLineWidth: 0,
lineWidth: 0,
visible: true,
},
yAxis: {
labels: {
enabled: false
},
min: 0,
gridLineWidth: 0,
title: {
text: ''
}
},
tooltip: {
pointFormat: '<span style="color:black">{series.name}</span>: <b>R$ {point.y}</b> ({point.percentage:.0f}%)<br/>',
shared: false,
},
legend: {
enabled: false,
},
plotOptions: {
bar: {
stacking: 'percent',
allowPointSelect: true,
colorByPoint: true,
cursor: 'pointer'
},
series: {
borderColor: '#000000',
//AQUI
borderWidth: 0
},
},
series: [{
name: 'Poupança',
data: [1000000]
}, {
name: 'Letras',
data: [75000.75]
}, {
name: 'Fundos',
data: [50545.49]
}]
});
$('#graph_capt').on('mouseenter', function() {
console.log('hide');
hideLabel(myChart);
});
$('#graph_capt').on('mouseleave', function() {
console.log('show');
showLabel(myChart);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="graph_capt" style="height:100px"></div>