php - 如何从 ajax 调用获取图表数据到 javascript

Question

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

我想要做的是让用户输入 user-id、dateStart、dateEnd，然后提交，并获得表格下方显示的图表(在“div”中)图表应该在用户每次点击提交时重新绘制。为此，我想使用 jQuery $.ajax，但我无法绘制图表。在指定的div中，它只带“var chartdata=['这里的所有图表数据'];”

这是 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 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，我正在尽力找出解决这个问题的方法。谢谢问候

Answer 1

试试这个，注释行:- AmCharts.ready(function() { and }); 。这对我有用。从这个link :-

"AmCharts.ready event makes sense only when charts are initialized on the page itself to make sure that the page is loaded before trying to create the charts."