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

Question

我有一个使用 jquery mobile 开发的移动应用程序。一页我有一个图表。当用户单击<a href="chart.html" data-ajax=“true”>Chart</a> 时，页面加载但图表未加载。当我刷新页面时，图表会起作用。

data-ajax=“false”时页面正常但不流畅且没有过渡效果

下面是我的图表代码

<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]
}]

});

希望对你有帮助。