Question

我有一个使用jquery mobile开发的移动应用。一页我有一张图表。当用户点击<a href="chart.html" data-ajax=“true”>Chart</a>页面加载但图表没有加载时。当我刷新页面时，图表可以正常工作。

当data-ajax=“false”页面有效但其不平滑且doest具有过渡效果时

以下是我的图表代码

<script type="text/javascript">
$(function () {
    var limit = 10000;    //increase number of dataPoints by increasing the limit
    var y = 0;
    var data = [];
    var dataSeries = { type: "line" };
    var dataPoints = [];
    for (var i = 0; i < limit; i += 1) {
        y += (Math.random() * 10 - 5);
        dataPoints.push({
            x: i,
            y: y
        });
    }
    dataSeries.dataPoints = dataPoints;
    data.push(dataSeries);

    //Better to construct options first and then pass it as a parameter
    var options = {
        zoomEnabled: true,
                animationEnabled: true,
        title: {
            text: "Try Zooming - Panning"
        },
        axisX: {
            labelAngle: 30
        },
        axisY: {
            includeZero: false
        },
        data: data  // random data
    };

    $("#chartContainer").CanvasJSChart(options);

});
</script>

HTML

<div id="chartContainer" style="height: 300px; width: 100%;"></div>

是否可以在不设置data-ajax=“false”的情况下执行图表功能？

Answer 1

为了处理复杂的图表，我通常使用Highcharts，它非常灵敏，可以自定义，并且在显示时也具有非常平滑的过渡效果。
这是JSFiddle上的Example。

Highcharts.chart('container', {
chart: {
    type: 'column'
},
title: {
    text: 'Column chart with negative values'
},
xAxis: {
    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
credits: {
    enabled: false
},
series: [{
    name: 'John',
    data: [5, 3, 4, 7, 2]
}, {
    name: 'Jane',
    data: [2, -2, -3, 2, 1]
}, {
    name: 'Joe',
    data: [3, 4, 4, -2, 5]
}]

}）;

我希望它有所帮助。

当data-ajax =“true”时执行jquery函数

1 个答案: