Question

我为我的仪表板页面制作了一个用于Android的HTML5混合应用程序和Highcharts。

此页面中有3个图表，每个图表中只有不到10个点。初始动画在PC浏览器（包括chrome＆amp; firefox）上看起来很流畅，但在我的移动设备（Nexus 7和MSM8916 CPU手机）上非常不稳定。即使我将持续时间设定为2000，它仍然不稳定。

使用jQuery 2.1.3和Hightcharts 4.1.5。

有人能告诉我原因以及如何提高移动设备上Highcharts动画的性能吗？

下面的html代码，我使用jquery mobile 1.4.5作为UI框架。

<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代码：

$(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

当我制作一个简单的highcharts测试html页面，并在移动Chrome浏览器上运行时，它运行顺畅。但是当简单打包到混合Android应用程序时，使用OS WebView＆amp;人行横道，它仍然波涛汹涌。（英特尔XDK）我测试了一个基于画布的js图表库，Chart.js，当混合应用程序也是如此。

所以，我认为这是VebView或Phonegap的问题。我现在找到了原因，当我解决它时会更新问题。谢谢大家。

为什么Highcharts动画在移动设备上不稳定？

1 个答案: