아약스 호출에서 자바 스크립트로 chartdata를 가져 오는 방법

나는 amcharts로 작업하고 있는데, "var chartdata = [ '']]"을 생성하는 데 사용 된 PHP 코드가 들어있는 파일 (data.php)이 있습니다. 차트. 차트를 그리기위한 자바 스크립트도 있습니다. user-id, dateStart 및 dateEnd의 3 가지 변수가 필요합니다. $ _GET 메서드를 통해 위의 파일에 데이터를 전송하는 양식이있는이 두 번째 파일 (view.php)도 있습니다. 이 파일에는 양식 바로 아래에 차트를 그리는 공간이 있습니다.아약스 호출에서 자바 스크립트로 chartdata를 가져 오는 방법

내가하고 싶은 일은 사용자가 user-id, dateStart, dateEnd를 입력 한 다음 제출하고 'div'의 양식 아래에 표시된 차트를 사용자가 조회 할 때마다 다시 그려야한다는 것입니다. . 그것을 위해 jQuery $ .ajax 사용하여 생각하지만 차트를 그릴 수 없습니다. 지정된 div에서 "var chartdata = [ '모든 차트 데이터가 여기에 있습니다];" 여기

는 view.php에서 아약스 코드 :

$.ajax({ 
    type: "GET", 
    url: "data.php", 
    data: {user: $("#user").val(), dtStart: $("[name=dtStart]").val(), dtEnd: $("[name=dtEnd]").val()}, 
    dataType: "html", 
    success: function(data) { 

    $("#chartdiv").html(' '); 
    $("#chartdiv").html(data); 
     } 
    });

여기에 그래프를 그리기위한 코드입니다 :

var chart; 
var average = 90.4; 
AmCharts.ready(function() { 

// SERIAL CHART  
chart = new AmCharts.AmSerialChart(); 
chart.pathToImages = "http://www.amcharts.com/lib/images/"; 
chart.autoMarginOffset = 5; 
chart.marginTop = 0; 
chart.marginRight = 10;  
chart.zoomOutButton = { 
    backgroundColor: '#000000', 
    backgroundAlpha: 0.15 
}; 
chart.dataProvider = chartData; 
chart.categoryField = "date"; 

// AXES 
// category 
var categoryAxis = chart.categoryAxis; 
categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true 
categoryAxis.minPeriod = "mm"; // our data is daily, so we set minPeriod to DD 
categoryAxis.dashLength = 1; 
categoryAxis.gridAlpha = 0.15; 
categoryAxis.axisColor = "#DADADA"; 
categoryAxis.equalSpacing = false; 

// value     
var valueAxis = new AmCharts.ValueAxis(); 
valueAxis.axisColor = "#DADADA"; 
valueAxis.dashLength = 1; 
valueAxis.logarithmic = true; // this line makes axis logarithmic 
chart.addValueAxis(valueAxis); 

// GUIDE for average 
var guide = new AmCharts.Guide(); 
guide.value = average; 
guide.lineColor = "#CC0000"; 
guide.dashLength = 4; 
guide.label = "average"; 
guide.inside = true; 
guide.lineAlpha = 1; 
valueAxis.addGuide(guide); 


// GRAPH 
var graph = new AmCharts.AmGraph(); 
graph.type = "smoothedLine"; 
graph.bullet = "round"; 
graph.bulletColor = "#FFFFFF"; 
graph.bulletBorderColor = "#00BBCC"; 
graph.bulletBorderThickness = 1; 
graph.bulletSize = 1; 
graph.title = "Price"; 
graph.valueField = "price"; 
graph.lineThickness = 2; 
graph.lineColor = "#00BBCC"; 
chart.addGraph(graph); 

// CURSOR 
var chartCursor = new AmCharts.ChartCursor(); 
chartCursor.cursorPosition = "mouse"; 
chartCursor.categoryBalloonDateFormat = "DD MMM, JJ:NN:SS"; 
chart.addChartCursor(chartCursor); 

// SCROLLBAR 
var chartScrollbar = new AmCharts.ChartScrollbar(); 
chart.addChartScrollbar(chartScrollbar); 

// WRITE 
chart.write("chartdiv"); 
}); 

</script>

당신이 나에게 도움을 주시기 바랍니다 줄 수는? 내가 jQuery를 익숙 해요 그리고 난이 문제를 해결하는 방법을 알아 내기 위해 최선을 시도하고있다 .. 감사

출처

2013-06-07 Mirela

여기에서 PHP 코드를 공유해 주실 수 있습니까? – lanan

Mirela

// $ sql = mysql_query ("SELECT_ vehicle_plate, fuel_level, data_ora FROM chart_data where vehicle_plate = 434 and data_ora> '2013-06-01 00:00:00'및 data_ora < '2013-06-01 23:30:00 '' ');$ sql = mysql_query ("SELECT_ vehicle_plate, fuel_level, data_ora FROM chart_data WHERE vehicle_plate =". $ _ GET [ '사용자']. "및"data_ora> "". $ dtstart. " 'AND data_ora <'". $ dtend. " '' '); while ($ rez = mysql_fetch_array ($ sql)) { \t \t $ timestamp = trtotime ($ rez [ 'data_ora']); $ data_ora = date ("Y, m, d, H, i", $ timestamp); $ fuel_level = $ rez [ 'fuel_level']; – Mirela

는,이 시도 라인을 주석 감사합니다 : - AmCharts.ready(function() { 및 });을. 이것은 나를 위해 일했다. 이 link에서 Qutoing : -

"AmCharts.ready 이벤트하는 차트 페이지 자체는 페이지가 차트를 만들 하기 전에로드되어 있는지 확인 에서 초기화하는 경우에만 의미합니다."

출처

2013-09-06 11:07:43 boddhisattva

아약스 호출에서 자바 스크립트로 chartdata를 가져 오는 방법

답변

관련 문제