1、jquery的ajax取到值后push到二维数组chartData(Date类型,float类型),chart.dataProvider = chartData;绑定到图表
2、demo里还有种固定的写法 dataProvider: [{"date": "2012-01-01", "value": 44}, {"date": "2012-01-02","value": 12}],如果你是动态数据千万不要想着按照这样的格式做字符串拼接来绑定数据,完全没有用,一定要用第一种push到数组的方法,浪费我几个小时的教训!
<script type="text/javascript">
var chart;
var chartTitle;
var chartWebID;
var chartData = [];
$(function() {
$.ajax({
url: "WebService.asmx/GetElements",
type: "POST",
data: {
WebID: $('#webid').val()
},
dataType: "json",
success: function(result) {
$.each(result, function(i, n) {
var elementDate = new Date(Date.parse(n.UpdateTime.replace(/-/g, "/")));
var elementValue = parseFloat(n.ElementValue);
chartTitle = n.ElementName;
chartWebID = n.ElementInWebID;
chartData.push({
date: elementDate,
value: elementValue
});
})
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.pathToImages = "amcharts/images/";
chart.dataProvider = chartData;
chart.dataDateFormat = "YYYY-M-D HH:NN:SS";
chart.categoryField = "date";
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.parseDates = true;
categoryAxis.minPeriod = "ss";
categoryAxis.gridAlpha = 0.1;
categoryAxis.minorGridAlpha = 0.1;
categoryAxis.axisAlpha = 0;
categoryAxis.minorGridEnabled = true;
categoryAxis.inside = true;
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.tickLength = 0;
valueAxis.axisAlpha = 0;
valueAxis.showFirstLabel = false;
valueAxis.showLastLabel = false;
chart.addValueAxis(valueAxis);
// GRAPH
var graph = new AmCharts.AmGraph();
graph.dashLength = 3;
graph.lineColor = "#00CC00";
graph.valueField = "value";
graph.dashLength = 3;
graph.bullet = "round";
graph.balloonText = "[[category]]<br><b><span style='font-size:14px;'>" + chartTitle + " |网站编号:" + chartWebID + " |历史价格:[[value]]元</span></b>";
chart.addGraph(graph);
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chart.addChartCursor(chartCursor);
// SCROLLBAR
var chartScrollbar = new AmCharts.ChartScrollbar();
chart.addChartScrollbar(chartScrollbar);
// HORIZONTAL GREEN RANGE
var guide = new AmCharts.Guide();
guide.value = 10;
guide.toValue = 20;
guide.fillColor = "#00CC00";
guide.inside = true;
guide.fillAlpha = 0.2;
guide.lineAlpha = 0;
valueAxis.addGuide(guide);
// WRITE
chart.write("chartdiv");
},
error: function(e) { console.log(e); }
});
});
</script>