Amcharts json，没有图表_Json_Amcharts

Amcharts json，没有图表

json

Amcharts json，没有图表,json,amcharts,Json,Amcharts,我的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 }, {

我的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 } ]

<!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>

我的amcharts文件如下：

 [ { "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 } ]

<!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>


amCharts教程：加载外部数据
AmCharts.loadJSON=函数（url）{
//创建请求
if（window.XMLHttpRequest）{
//IE7+、Firefox、Chrome、Opera、Safari
var request=new XMLHttpRequest（）；
}否则{
//IE6、IE5的代码
var request=newactivexobject（'Microsoft.XMLHTTP'）；
}
//加载它
//最后一个“false”参数确保我们的代码将在
//数据已加载
打开（'GET'，url，true）；
request.send（）；
//解析并返回输出
返回eval（request.responseText）；
};
var图；
//创建图表
AmCharts.ready（函数（）{
//加载数据
var chartData=AmCharts.loadJSON（'data.php'）；
//序列图
chart=新的AmCharts.AmSerialChart（）；
chart.pathToImages=”http://www.amcharts.com/lib/images/";
chart.dataProvider=chartData；
chart.categoryField=“category”；
chart.dataDateFormat=“YYYY-MM-DD JJ:NN:SS”；
//图表
var graph1=新的AmCharts.AmGraph（）；
图1.valueField=“value1”；
图1.bullet=“圆形”；
graph1.bulletBorderColor=“#FFFFFF”；
图1.2厚度=2；
图1.lineThickness=2；
图1.lineAlpha=0.5；
图.添加图（图1）；
var graph2=新的AmCharts.AmGraph（）；
图2.valueField=“value2”；
图2.bullet=“圆形”；
graph2.bulletBorderColor=“#FFFFFF”；
图2.2厚度=2；
图2.lineThickness=2；
图2.lineAlpha=0.5；
图.添加图（图2）；
//类别轴
chart.categoryAxis.parseDates=true；
//写
chart.write（“chartdiv”）；
});

不幸的是，我没有得到图表，请看这里：我只能在chrome开发者控制台中看到一条消息：

onResRdy中的异常：TypeError:无法读取未定义的属性“htmlRes”

问题在于您的请求。
打开它时，您将async设置为true。这会导致“loadJSON”函数返回

undefined

，因为当您请求

请求时，响应没有返回。responseText

结果是，图表的

数据提供程序是undefined
，因此图表不工作。

要解决此问题，请使用
request.open（'GET'，url，FALSE）；


或者对响应使用onreadystatechange
，然后重新绘制图表。
问题在于您的请求。
打开它时，您将async设置为true。这会导致'loadJSON'函数返回未定义的
，因为当您请求请求时响应尚未返回。responseText

结果是图表的数据提供程序未定义，因此图表无法运行。

若要解决此问题，请使用
请求。打开（'GET'，url，FALSE）；


或者对响应使用onreadystatechange
，然后重新绘制图表。
我在第一行发现了错误，我的意思是在您的JSON格式中，
根据我的经验，您不能在结果字符串中使用：“，
例如
在这里，当您在此时放置20:13:58
时，数据提供程序无法识别它，因此如何处理它，请尝试从这个JSON字符串中删除：
，这应该可以用。
我在第一行发现错误，我的意思是在您的JSON格式中，
根据我的经验，您不能在结果字符串中使用：“，
例如
在这里，当您在此时放置20:13:58时，数据提供程序无法识别它，因此如何处理它，请尝试从这个JSON字符串中删除：
，这应该会起作用。
您也可以将代码发布到data.php文件中吗？您的数据似乎有问题，即值之间有奇怪的符号s和逗号，这导致JSON解析器失败，因此没有图表。您可以将代码也发布到data.php文件中吗？您的数据似乎有问题，即值和逗号之间有奇怪的符号，这导致JSON解析器失败，因此没有图表。事实上这就是问题所在。但现在您请求的JSON似乎有问题与上面给出的示例结构不同。您只有“value”字段，但没有“value1”或“value2”根据图表的要求。我建议您对请求使用onreadystatechange事件。因为如果请求不能立即返回，它将冻结您的页面。事实上这就是问题所在。但现在您请求的JSON似乎不像上面给出的示例那样结构化。您只有“值”字段，但没有图表要求的“value1”或“value2”。我建议您对请求使用onreadystatechange事件。因为如果请求不能立即返回，它将冻结您的页面。