Why Highcharts Animation choppy on mobile device? - highcharts

Question

I'm making a HTML5 hybrid app for android with Highcharts for my dashboard page.
There are 3 charts in this page, and only less than 10 points in each chart.
The init animation looks smoothly on PC browser(include chrome & firefox), but very choppy on my mobile device(Nexus 7 and MSM8916 CPU phone).
Even i set duration to 2000, it's still choppy.
With jQuery 2.1.3 and Hightcharts 4.1.5.
Could someone tell me the reason and how to improve the performance of Highcharts animation on mobile device?
html code below, i use jquery mobile 1.4.5 for UI framework.
<div data-role="page" data-title="总览" id="overall-page">
<div role="main" class="ui-content no-margin">
<div class="border-chart" id="hdgjChart"></div>
<div class="border-chart" id="sbzxlChart"></div>
<div class="border-chart" id="lsgjChart"></div>
</div>
</div>
js code below:
$(document).on("pageshow", "#overall-page", function() {
// Draw first Charts.
$('#hdgjChart').highcharts({
credits: {
enabled: false
},
chart: {
type: 'column',
//pinchType: 'xy',
//zoomType: 'xy',
//panning: true
},
title: {
text: '活动告警',
align: 'left',
margin: 0,
style: { "color": "#004488", "fontSize": "16px" }
},
legend: {
enabled: false
},
xAxis: {
labels: {
enabled: false
},
tickLength: 0
},
yAxis: {
labels: {
enabled: false
},
stackLabels: {
style: {
color: "#004488"
},
enabled: true
},
title: {
text: null
},
tickAmount: 8
},
plotOptions: {
column: {
stacking: 'normal',
animation: {
duration: 2000
}
}
},
tooltip: {
headerFormat: '<span style="font-size: 10px">{point.key}</span><br/>'
},
series: [{
name: '数目',
data: [
{
y: 381,
color: "#f00505",
name: "一级告警"
},
{
y: 25,
color: "#f46700",
name: "二级告警"
},
{
y: 652,
color: "#ffcf05",
name: "三级告警"
},
{
y: 72,
color: "#22a5f2",
name: "四级告警"
}]
}]
});
// Draw second chart
$('#sbzxlChart').highcharts({
credits: {
enabled: false
},
chart: {
type: 'pie',
spacingBottom: 0
},
title: {
text: '<span style="color:#004488;font-size:16px">设备在线率</span><span style="color:#004488;font-size:12px">--总设备数：78</span>',
align: 'left',
margin: 0
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
legend: {
align: 'right',
verticalAlign: 'top',
floating: true,
itemDistance: 10,
borderRadius:3,
borderWidth: 1
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
format: '{point.y}个，{point.percentage:.1f} %',
style: {
color: "#004488"
}
},
innerSize: '50%',
point: {
events: {
legendItemClick: function(e) {
e.preventDefaut();
}
}
},
animation: {
duration: 2000
}
}
},
series: [{
name: '数目',
data: [
{
y: 31,
color: "#00ff00",
name: '在线'
},
{
y: 47,
color: "#959595",
name: '中断'
}
],
showInLegend: true
}]
});
// Draw third chart
$('#lsgjChart').highcharts({
credits: {
enabled: false
},
chart: {
type: 'areaspline',
spacingBottom: 0,
//pinchType: 'x',
//zoomType: 'x',
//panning: true
},
title: {
text: '<span style="color:#004488;font-size:16px">历史告警数量</span><span style="color:#004488;font-size:12px">--最近7天</span>',
align: 'left',
margin: 7
},
tooltip: {
headerFormat: "",
pointFormat: '{point.y}'
},
legend: {
align: 'right',
verticalAlign: 'top',
floating: true,
borderRadius:3,
borderWidth: 1
},
xAxis: {
gridLineWidth: 1,
tickAmount: 7,
tickInterval: 1
},
yAxis: {
stackLabels: {
enabled: true,
useHTML: true,
y: -12,
formatter: function() {
return '<span style="background-color:#0d61be;color:white;font-weight:normal">' + this.total + '</span>';
}
},
title: {
text: null
},
tickAmount: 7
},
plotOptions: {
areaspline: {
stacking: 'normal',
pointStart: 1,
color: '#0d61be',
events: {
legendItemClick: function(e) {
e.preventDefault();
}
},
animation: {
duration: 2000
}
}
},
series: [{
name: '总告警数',
data: [150, 450, 300, 550, 300, 300, 100]
}]
});
});

Answer 1

When I made a simple highcharts test html page, and run it on mobile chrome browser, it runs smoothly.
But when simple packaged it to hybrid android app, using OS WebView & Crosswalk, It runs choppy still.(intel XDK)
I tested a canvas based js chart lib, Chart.js, It's choppy also when hybrid app.
So, I think it's the problem of VebView or Phonegap.
I'm finding the reason now, and will update the issue when I solved it.
Thanks all.