php - AmCharts 与 MySQL

标签 php javascript html mysql amcharts

一段时间以来,我一直致力于使用动态数据创建图表。我正在学习本教程

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 教程使用的数据相同。我认为这就是所有相关信息;所以如果你们能帮助我,我将非常感激。

最佳答案

只需创建一个 php 文件返回这个(或那个样式的内容):

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}];

并将其包含到 armcharts 插件所在的文件中。

关于php - AmCharts 与 MySQL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17643105/

相关文章:

php - 使用 SQL 计算表中前几行的值

javascript - Jquery 加载忽略对象而不是发布

javascript - jQuery:未捕获错误:语法错误,无法识别的表达式:(一堆照片标题文本数据)

javascript - 如何在 JavaScript 中检查输入是否包含字符串

php-script 输出 xml 文件,但在特殊字符处中断

php - 如何按每个主题显示我的数据库文件

php - 将数组从一个表插入到另一个表

发送 key 的 Javascript 语句

javascript - Recharts 垂直渲染饼图

javascript - 在 jQuery 中获取链接的原始值并更新