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

});

도움이되기를 바랍니다.