I use Highcharts to visualize my data. Recently I found that when I move my mouse around the chart, part of the chart will be missing. Looks like it happens randomly and I have no idea what triggers it.
I created a jsfiddle example here with js codes below:
Highcharts.chart('container', {
credits: {
enabled: false
},
title: {
text: "资产结构"
},
tooltip: {
enabled: true,
shared: true
},
xAxis: [{
categories: ['2014年', '2015年', '2016年', '2017年半年度'],
crosshair: true
}],
yAxis: [{
title: {
text: "金额(万元)",
style: {
color: "#33C4FF"
}
},
labels: {
format: "{value:,.0f}",
style: {
color: "#33C4FF"
}
},
opposite: false
}, {
title: {
text: "比率(倍)",
style: {
color: "#99FF33"
}
},
labels: {
format: "{value}",
style: {
color: "#99FF33"
}
},
opposite: true
}],
plotOptions: {
area: {
stacking: 'normal'
},
series: {
shadow: true
}
},
legend: {
enabled: true,
backgroundColor: Highcharts.theme && Highcharts.theme.legendBackgroundColor || '#FFFFFF'
},
series: [{
name: "流动资产",
yAxis: 0,
data: [{
color: "#33C4FF",
y: -0.01,
Label: null,
radius: null,
innerRadius: null,
SharedTooltipExtraName: "资产总额",
SharedTooltipExtraValue: "1.69"
}, {
color: "#33C4FF",
y: 0.81,
Label: null,
radius: null,
innerRadius: null,
SharedTooltipExtraName: "资产总额",
SharedTooltipExtraValue: "306329.90"
}, {
color: "#33C4FF",
y: 0.01,
Label: null,
radius: null,
innerRadius: null,
SharedTooltipExtraName: "资产总额",
SharedTooltipExtraValue: "390056.33"
}, {
color: "#33C4FF",
y: 0.07,
Label: null,
radius: null,
innerRadius: null,
SharedTooltipExtraName: "资产总额",
SharedTooltipExtraValue: "0.09"
}],
type: "area",
color: "#33C4FF",
marker: {
symbol: "circle"
}
}, {
name: "非流动资产",
yAxis: 0,
data: [{
color: "#FFE333",
y: 1.68,
Label: null,
radius: null,
innerRadius: null,
SharedTooltipExtraName: null,
SharedTooltipExtraValue: null
}, {
color: "#FFE333",
y: 306329.79,
Label: null,
radius: null,
innerRadius: null,
SharedTooltipExtraName: null,
SharedTooltipExtraValue: null
}, {
color: "#FFE333",
y: 390056.32,
Label: null,
radius: null,
innerRadius: null,
SharedTooltipExtraName: null,
SharedTooltipExtraValue: null
}, {
color: "#FFE333",
y: 0.02,
Label: null,
radius: null,
innerRadius: null,
SharedTooltipExtraName: null,
SharedTooltipExtraValue: null
}],
type: "area",
color: "#FFE333",
marker: {
symbol: "circle"
}
}, {
name: "流动比率",
yAxis: 1,
data: [{
color: "#99FF33",
y: -4.03,
Label: null,
radius: null,
innerRadius: null,
SharedTooltipExtraName: null,
SharedTooltipExtraValue: null
}, {
color: "#99FF33",
y: 23.44,
Label: null,
radius: null,
innerRadius: null,
SharedTooltipExtraName: null,
SharedTooltipExtraValue: null
}, {
color: "#99FF33",
y: 0,
Label: null,
radius: null,
innerRadius: null,
SharedTooltipExtraName: null,
SharedTooltipExtraValue: null
}, {
color: "#99FF33",
y: 1.19,
Label: null,
radius: null,
innerRadius: null,
SharedTooltipExtraName: null,
SharedTooltipExtraValue: null
}],
type: "spline",
color: "#99FF33",
marker: {
symbol: "circle"
}
}, {
name: "速动比率",
yAxis: 1,
data: [{
color: "#33FFC4",
y: -6.32,
Label: null,
radius: null,
innerRadius: null,
SharedTooltipExtraName: null,
SharedTooltipExtraValue: null
}, {
color: "#33FFC4",
y: 23.25,
Label: null,
radius: null,
innerRadius: null,
SharedTooltipExtraName: null,
SharedTooltipExtraValue: null
}, {
color: "#33FFC4",
y: 0,
Label: null,
radius: null,
innerRadius: null,
SharedTooltipExtraName: null,
SharedTooltipExtraValue: null
}, {
color: "#33FFC4",
y: 1.06,
Label: null,
radius: null,
innerRadius: null,
SharedTooltipExtraName: null,
SharedTooltipExtraValue: null
}],
type: "spline",
color: "#33FFC4",
marker: {
symbol: "circle"
}
}]
});
#container {
min-width: 310px;
max-width: 800px;
height: 400px;
margin: 0 auto
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/themes/dark-unica.js"></script>
<div id="container"></div>
Open it in Microsoft edge and then move the mouse around the yellow point on category '2016年'. Keep doing that for about 5 seconds, you should be able to see the issue.
I also record a video about the issue here: youtube link, any words are appreciated.
-- Update -- I tested the jsfiddle example on Microsoft Edge 40.15063.674.0, it works well. In the youtube video, the version of Edge is 41.16299.15.0, I am not sure if this is related.