2

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

我想要做的是让用户输入用户 ID、日期开始、日期结束然后提交，并获取表单下方显示的图表（在“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，我正在尽力弄清楚如何解决这个问题。谢谢问候

4

1 回答 1

1

试试这个，评论这一行：-AmCharts.ready(function() {和});. 这对我有用。从此链接引用：-

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

于 2013-09-06T11:07:43.537 回答