很长一段时间以来,我一直致力于使用动态数据创建图表。我正在关注本教程
http://blog.amcharts.com/2011/03/amcharts-javascript-tutorials-part-2.html
我有一个 php 文件,它可以工作,并且成功地查询了我设置的 MYSQL 服务器,并创建了一个文本文件。
目前,我的数据库中只有 16 个条目,但是,我有第二个 java 程序清除我的架构并在执行时重新填充它......所以数据不会一直保持不变。
在我的文本文件中,我的数据格式如下:
秒,线程\n
我正在跟踪我的机器的活动线程总数。
使用我的文本文件中的数据、活动线程的总数和 AmCharts,我正在尝试创建一个图表。但是,它似乎不起作用。我仔细检查了我的代码,但似乎无法弄清楚为什么它不起作用。但是,当我使用静态数据制作图表时,它可以正常工作……我可以补充一下。
所以我的问题是,我做错了什么?或者大家觉得问题出在哪里?
这是我的html代码:
<html>
<head>
<meta http-equiv="Content-Type" content ="text/html; charset = utf-8">
<title>Active Threads</title>
<script src="js\amcharts.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css" type="text/css">
<script type="text/javascript">
/*var chartData = [{ country: "USA", visits: 4252 },
{ country: "China", visits: 1882 },
{ country: "Japan", visits: 1809 },
{ country: "Germany", visits: 1322 },
{ country: "UK", visits: 1122 },
{ country: "France", visits: 1114 },
{ country: "India", visits: 984 },
{ country: "Spain", visits: 711 },
{ country: "Netherlands", visits: 665 },
{ country: "Russia", visits: 580 },
{ country: "South Korea", visits: 443 },
{ country: "Canada", visits: 441 },
{ country: "Brazil", visits: 395 },
{ country: "Italy", visits: 386 },
{ country: "Australia", visits: 384 },
{ country: "Taiwan", visits: 338 },
{ country: "Poland", visits: 328}];
window.onload = function() {
var chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "country";
chart.margingTop = 15;
chart.marginLeft = 55;
chart.marginRight = 15;
chart.margingBottom = 80;
chart.angle = 30;
chart.depth3D = 15;
var catAxis = chart.categoryAxis;
catAxis.gridCount = chartData.length;
catAxis.labelRotation = 90;
var graph = new AmCharts.AmGraph();
graph.balloonText = "[[category]]: [[value]]";
graph.valueField = "visits"
graph.type = "column";
graph.lineAlpha = 0;
graph.fillAlphas = 0.8;
chart.addGraph(graph);
chart.write('chartContainer');
}*/
var chart;
var dataProvider;
window.onload = function(){
createChart();
loadCSV("secondsAndThreads.txt");
}
function loadCSV(file){
if (window.XMLHttpRequest){
var request = new XMLHttpRequest();
}
else {
var request = new ActiveXObject('Microsoft.XMLHTTP');
}
request.open('GET', file, false);
request.send();
parseCSV(request.responseText);
}
function parseCSV(data){
data = data.replace (/\r\n/g, "\n");
data = data.replace (/\r/g, "\n");
var rows = data.split("\n");
dataProvider = [];
for (var i = 0; ; i < rows.length; i++){
if(rows[i]){
var column = rows[i].split(",");
var seconds = column[0];
var threads = column[1];
var dataObject = {seconds:seconds, threads:threads};
dataProvider.push(dataObject);
}
}
alert(column);
chart.dataProvider = dataProvider;
chart.validateData();
}
function createChart(){
chart = new AmCharts.AmSerialChart();
chart.categoryField = "seconds";
var graph = new AmCharts.AmGraph();
graph.valueField = "threads";
graph.type = "column";
chart.addGraph(graph);
chart.write('chartdiv');
}
</script>
</head>
<body style="background-color: #EEEEEE">
<div id = "chartdiv" style= "width:900px; height:500px; background- color:#FFFFFF"></div>
<br>
<br>
</body>
</html>
我已经用静态数据(有效)注释掉了图表,非注释部分(第二部分)是拒绝工作的部分。查询我的数据库的 html 文件、style.css 文件和 php 文件都位于此目录中。
C:\wamp\www\amCharts\amcharts
.js 文件位于此目录中
C:\wamp\www\amCharts\amcharts\js
我正在使用 wamp,并在 chrome 中打开 html 文件。最后,动态数据与静态图表的数据不同。国家/地区的静态数据与 AmCharts 教程使用的数据相同。我认为这就是所有相关信息;因此,如果你们能帮助我,我将不胜感激。