Amcharts json，没有图表

Question

我的 php 生成的 Json 文件如下所示：

 [ { "category": "2015-07-02 20:13:58", "value1": 30.500, "value2": 30.500 }, { "category": "2015-07-02 20:14:59", "value1": 29.750, "value2": 29.750 }, { "category": "2015-07-02 20:16:01", "value1": 29.125, "value2": 29.125 }, { "category": "2015-07-02 20:17:03", "value1": 28.625, "value2": 28.625 }, { "category": "2015-07-02 20:18:04", "value1": 28.125, "value2": 28.125 } ]

我的 amcharts 文件是这样的：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>amCharts tutorial: Loading external data</title>
</head>
<body>

<!-- prerequisites -->
<link rel="stylesheet" href="http://www.amcharts.com/lib/style.css"  
type="text/css">
<script src="http://www.amcharts.com/lib/3/amcharts.js" 
type="text/javascript"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"    
type="text/javascript"> 
</script>

<!-- cutom functions -->
<script>
AmCharts.loadJSON = function(url) {
// create the request
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari
var request = new XMLHttpRequest();
} else {
// code for IE6, IE5
var request = new ActiveXObject('Microsoft.XMLHTTP');
}

// load it
// the last "false" parameter ensures that our code will wait before the
// data is loaded
request.open('GET', url, true);
request.send();

// parse adn return the output
return eval(request.responseText);
};
</script>

<!-- chart container -->
<div id="chartdiv" style="width: 600px; height: 300px;"></div>

<!-- the chart code -->
<script>
var chart;

 // create chart
 AmCharts.ready(function() {

// load the data
var chartData = AmCharts.loadJSON('data.php');

// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.pathToImages = "http://www.amcharts.com/lib/images/";
chart.dataProvider = chartData;
chart.categoryField = "category";
chart.dataDateFormat = "YYYY-MM-DD JJ:NN:SS";

// GRAPHS

var graph1 = new AmCharts.AmGraph();
graph1.valueField = "value1";
graph1.bullet = "round";
graph1.bulletBorderColor = "#FFFFFF";
graph1.bulletBorderThickness = 2;
graph1.lineThickness = 2;
graph1.lineAlpha = 0.5;
chart.addGraph(graph1);

var graph2 = new AmCharts.AmGraph();
graph2.valueField = "value2";
graph2.bullet = "round";
graph2.bulletBorderColor = "#FFFFFF";
graph2.bulletBorderThickness = 2;
graph2.lineThickness = 2;
graph2.lineAlpha = 0.5;
chart.addGraph(graph2);

// CATEGORY AXIS
chart.categoryAxis.parseDates = true;

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

 </script>

</body>
</html>

不幸的是我没有图表，请看这里：http://bitfreun.de/index.html 我只能在 chrome 开发人员控制台中看到一条消息： "Exception in onResRdy: TypeError: Cannot read property 'htmlRes' of undefined"

Answer 1

问题出在你的请求上。
当你打开它时，你将async设置为true。这会导致 'loadJSON' 函数变为 return undefined，因为当您请求 request.responseText 时响应还没有 returned。
结果是，您的图表的 dataProvider 是 undefined，因此您的图表不起作用。

要解决此问题，请使用
request.open('GET', url, FALSE);
或者使用 onreadystatechange 作为响应，然后重新绘制图表。

Answer 2

我在第一行发现了错误，我的意思是在你的 JSON 格式中，根据我的经验，您不能在结果字符串中使用 ":"，例如，

2015-07-02 20:13:58

这里当你放20:13:58的时候，dataprovider无法识别，那怎么办呢，试试去掉: 来自这个 JSON 字符串，这应该可以工作。

Amcharts json，没有图表

Amcharts json, no chart

json

amcharts