Php 如何将ajax调用中的图表数据转换为javascript

我正在使用amcharts，我有一个文件（data.php），其中包含一些php代码，用于生成图表的“var chartdata=['']；”。它还有用于绘制图表的javascript。它包含3个变量，用户id、dateStart和dateEnd。 我还有第二个文件（view.php），它有一个表单，可以通过$\u GET方法将数据提交到上面的文件中。在这个文件中，我有一个空间在表单的正下方绘制图表

我想做的是让用户输入用户id、dateStart、dateEnd然后submit，，并获得表单下方显示的图表（在“div”中）。每当用户点击submit时，图表都应该重新绘制。为此，我想使用jQuery$.ajax，但我无法绘制图表。在指定的div中，它只带来“var chartdata=['all chart data here']；”

下面是view.php中的ajax代码：

$.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图；
var平均值=90.4；
AmCharts.ready（函数（）{
//序列图
chart=新的AmCharts.AmSerialChart（）；
chart.pathToImages=”http://www.amcharts.com/lib/images/";
chart.autoMarginOffset=5；
chart.marginTop=0；
chart.marginRight=10；
chart.zoomOutButton={
背景颜色：'#000000'，
背景α：0.15
};
chart.dataProvider=chartData；
chart.categoryField=“日期”；
//斧头
//类别
var categoryAxis=chart.categoryAxis；
categoryAxis.parseDates=true；//由于我们的数据是基于日期的，所以我们将parseDates设置为true
categoryAxis.minPeriod=“mm”//我们的数据是每日的，所以我们将minPeriod设置为DD
categoryAxis.dashLength=1；
categoryAxis.gridAlpha=0.15；
categoryAxis.axisColor=“#DADADA”；
categoryAxis.equalspace=false；
//价值观
var valueAxis=新的AmCharts.valueAxis（）；
valueAxis.axisColor=“#DADADA”；
valueAxis.dashLength=1；
valueAxis.logorical=true；//此行使轴为对数
图表.添加valueAxis（valueAxis）；
//平均值指南
var guide=新的AmCharts.guide（）；
guide.value=平均值；
guide.lineColor=“#CC0000”；
导轨长度=4；
guide.label=“平均”；
guide.inside=true；
guide.lineAlpha=1；
valueAxis.addGuide（指南）；
//图表
var-graph=新的AmCharts.AmGraph（）；
graph.type=“平滑线”；
graph.bullet=“圆形”；
graph.bulletColor=“#FFFFFF”；
graph.bulletBorderColor=“#00BBCC”；
图1：厚度=1；
图1.1.1尺寸=1；
graph.title=“价格”；
graph.valueField=“价格”；
图1.lineThickness=2；
graph.lineColor=“#00BBCC”；
图表。添加图表（图形）；
//光标
var chartCursor=new AmCharts.chartCursor（）；
chartCursor.cursorPosition=“鼠标”；
chartCursor.categoryBalloonDateFormat=“DD MMM，JJ:NN:SS”；
chart.addChartCursor（chartCursor）；
//滚动条
var chartScrollbar=新的AmCharts.chartScrollbar（）；
chart.addChartScrollbar（chartScrollbar）；
//写
chart.write（“chartdiv”）；
}); 

你能给我一些帮助吗？我不熟悉jQuery，我正在尽最大努力找出如何解决这个问题。。 谢谢

---

关于

尝试此操作，注释行：-

AmCharts.ready（function（）{

和

}）。这对我有用。从这里可以看出：

“AmCharts.ready事件只有在上初始化图表时才有意义
页面本身，以确保在尝试加载之前已加载该页面
创建图表。”

您也可以在这里分享您的php代码。//$sql=mysql\u查询（“从图表数据中选择车辆牌照、燃油油位、数据，其中车辆牌照=434，数据>2013-06-01 00:00:00”，数据>2013-06-01 23:30:00”）$sql=mysql查询（“从图表数据中选择车辆牌照、燃油油位、数据牌照，其中车辆牌照=“.$\u GET['user']”和数据牌照>“$dtstart.”和数据牌照<”$dtend.”）；而（$rez=mysql\u-fetch\u-array（$sql））{$timestamp=trtotime（$rez['data\u-ora']）；$data\u-ora=date（“Y，m，d，H，i”，$timestamp）；$fuel\u-level=$rez['fuel\u-level]；if（！empty（$javascript））$javascript=$javascript.，“；$javascript=$javascript.{date:new date（$data\u-ora.），price:”.$fuel_level.}”；}$javascript=“var chartData=[”$javascript.]；“；//echo$javascript；？>
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>