私はかなり長い間、動的データを使用してグラフを作成することに取り組んできました。私はこのチュートリアルに従っています
http://blog.amcharts.com/2011/03/amcharts-javascript-tutorials-part-2.html
動作するphpファイルがあり、セットアップしたMYSQLサーバーに正常にクエリを実行し、テキストファイルを作成します。
当分の間、データベースには 16 エントリしかありませんが、スキーマをクリアし、実行されるたびに再入力する 2 番目の 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>
グラフを静的データ (機能する) でコメントアウトしましたが、コメントのない部分 (2 番目の部分) は機能しない部分です。データベースにクエリを実行する html ファイル、style.css ファイル、および php ファイルはすべて、このディレクトリにあります。
C:\wamp\www\amCharts\amcharts
.js ファイルはこのディレクトリにあります
C:\wamp\www\amCharts\amcharts\js
私は wamp を使用しており、html ファイルを chrome で開いています。最後に、動的データは静的チャートのデータと同じではありません。国の静的データは、AmCharts チュートリアルで使用したデータと同じです。関連する情報はこれだけだと思います。皆さんが私を助けてくれれば、本当に感謝しています。