amcharts - 图形不显示值/使用 ajax 绘制 amcharrt/如何通过查询数据库绘制 amchart [英] amcharts - Graph not displaying values/Use ajax to plot amcharrt/How to plot amchart by querying database

查看:23
本文介绍了amcharts - 图形不显示值/使用 ajax 绘制 amcharrt/如何通过查询数据库绘制 amchart的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

这里是我的 HTML &用于获取 amcharts 图的 javascript 代码

Here my HTML & javascript code to get amcharts plot going

我调用数据库,通过在 PHP & 中将其转换为 json 格式来检索结果.然后将其传递给图形进行显示.

I make a call to the database, retrieve the results by converting it to a json format in PHP & then pass it to a graph to display.

下面的chartData 变量具有数据库查询返回的输出.当我将预期输出静态分配给 chartData 变量时,图形会绘制.但是,当我分配 json 的 responseText 值重新调整的变量sql_resp"时,图形显示未定义"值.

The chartData variable below has the output that the database query returns. when I statically assign the expected output to chartData variable, the graph plots. However, when I assign the variable "sql_resp" which the responseText value of the json retuned, the graph says "undefined" values.

我使用了诸如 firebug 之类的网络工具来 100% 确定 json 确实会返回到结果中.这是我第一次使用 amcharts.有人可以帮助我理解我做错了什么.

I've used web tools such as firebug to be 100% sure that the json is indeed coming back in the result. This is the first time am using amcharts. Can someone please help me understand what I'm doing wrong.

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" type="text/css" href="css/dashboard.css">
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/jsapi.js"></script>
        <script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
        <script src="http://www.amcharts.com/lib/3/serial.js"></script>
        <script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
        <script type="text/javascript">
            var db_query = <?php echo json_encode($$db_query_1) ?>;
            var sql_resp = $.ajax({
                type: 'POST',       
                url: "mySQL.php",
                data: {'db_q': db_query},
                dataType: 'html',
                context: document.body,
                global: false,
                async:false,
                success: function(data) {
                    return data;
                }
            }).responseText;

            alert(sql_resp);


var chartData = [{"OCCUR_DATE":"2015-06-01","FREQ":5296},{"OCCUR_DATE":"2015-06-02","FREQ":4880},{"OCCUR_DATE":"2015-06-03","FREQ":4721},{"OCCUR_DATE":"2015-06-04","FREQ":3322},{"OCCUR_DATE":"2015-06-05","FREQ":1909},{"OCCUR_DATE":"2015-06-06","FREQ":1422},{"OCCUR_DATE":"2015-06-07","FREQ":2722},{"OCCUR_DATE":"2015-06-08","FREQ":7505},{"OCCUR_DATE":"2015-06-09","FREQ":4920},{"OCCUR_DATE":"2015-06-10","FREQ":3434},{"OCCUR_DATE":"2015-06-11","FREQ":4637},{"OCCUR_DATE":"2015-06-12","FREQ":2025},{"OCCUR_DATE":"2015-06-13","FREQ":1597},{"OCCUR_DATE":"2015-06-14","FREQ":2241},{"OCCUR_DATE":"2015-06-15","FREQ":4606},{"OCCUR_DATE":"2015-06-16","FREQ":1980},{"OCCUR_DATE":"2015-06-17","FREQ":4266},{"OCCUR_DATE":"2015-06-18","FREQ":4222},{"OCCUR_DATE":"2015-06-19","FREQ":2162},{"OCCUR_DATE":"2015-06-20","FREQ":1555},{"OCCUR_DATE":"2015-06-21","FREQ":2694},{"OCCUR_DATE":"2015-06-22","FREQ":3098},{"OCCUR_DATE":"2015-06-23","FREQ":4529},{"OCCUR_DATE":"2015-06-24","FREQ":4726},{"OCCUR_DATE":"2015-06-25","FREQ":4923},{"OCCUR_DATE":"2015-06-26","FREQ":2278},{"OCCUR_DATE":"2015-06-27","FREQ":1671},{"OCCUR_DATE":"2015-06-28","FREQ":2530},{"OCCUR_DATE":"2015-06-29","FREQ":5875},{"OCCUR_DATE":"2015-06-30","FREQ":4769},{"OCCUR_DATE":"2015-07-01","FREQ":5310},{"OCCUR_DATE":"2015-07-02","FREQ":4728},{"OCCUR_DATE":"2015-07-03","FREQ":1553},{"OCCUR_DATE":"2015-07-04","FREQ":898},{"OCCUR_DATE":"2015-07-05","FREQ":3693},{"OCCUR_DATE":"2015-07-06","FREQ":5355},{"OCCUR_DATE":"2015-07-07","FREQ":4942},{"OCCUR_DATE":"2015-07-08","FREQ":4877},{"OCCUR_DATE":"2015-07-09","FREQ":4802},{"OCCUR_DATE":"2015-07-10","FREQ":2132},{"OCCUR_DATE":"2015-07-11","FREQ":879},{"OCCUR_DATE":"2015-07-12","FREQ":1783},{"OCCUR_DATE":"2015-07-13","FREQ":5787},{"OCCUR_DATE":"2015-07-14","FREQ":5355},{"OCCUR_DATE":"2015-07-15","FREQ":5208},{"OCCUR_DATE":"2015-07-16","FREQ":4969},{"OCCUR_DATE":"2015-07-17","FREQ":2260},{"OCCUR_DATE":"2015-07-18","FREQ":1668},{"OCCUR_DATE":"2015-07-19","FREQ":3116},{"OCCUR_DATE":"2015-07-20","FREQ":6058},{"OCCUR_DATE":"2015-07-21","FREQ":5144},{"OCCUR_DATE":"2015-07-22","FREQ":5906},{"OCCUR_DATE":"2015-07-23","FREQ":5953},{"OCCUR_DATE":"2015-07-24","FREQ":2807},{"OCCUR_DATE":"2015-07-25","FREQ":1703},{"OCCUR_DATE":"2015-07-26","FREQ":1996},{"OCCUR_DATE":"2015-07-27","FREQ":5646},{"OCCUR_DATE":"2015-07-28","FREQ":5283},{"OCCUR_DATE":"2015-07-29","FREQ":5955},{"OCCUR_DATE":"2015-07-30","FREQ":5867},{"OCCUR_DATE":"2015-07-31","FREQ":2774},{"OCCUR_DATE":"2015-08-01","FREQ":2192},{"OCCUR_DATE":"2015-08-02","FREQ":4069},{"OCCUR_DATE":"2015-08-03","FREQ":5712},{"OCCUR_DATE":"2015-08-04","FREQ":5774},{"OCCUR_DATE":"2015-08-05","FREQ":5058},{"OCCUR_DATE":"2015-08-06","FREQ":5746},{"OCCUR_DATE":"2015-08-07","FREQ":2884},{"OCCUR_DATE":"2015-08-08","FREQ":1494},{"OCCUR_DATE":"2015-08-09","FREQ":3931},{"OCCUR_DATE":"2015-08-10","FREQ":5834},{"OCCUR_DATE":"2015-08-11","FREQ":6811},{"OCCUR_DATE":"2015-08-12","FREQ":5076},{"OCCUR_DATE":"2015-08-13","FREQ":4542},{"OCCUR_DATE":"2015-08-14","FREQ":87},{"OCCUR_DATE":"2015-08-15","FREQ":1726},{"OCCUR_DATE":"2015-08-16","FREQ":1159},{"OCCUR_DATE":"2015-08-18","FREQ":3}];

    AmCharts.ready(function() {
            var chart = new AmCharts.AmSerialChart();
            chart.dataProvider = chartData;
            chart.categoryField = "OCCUR_DATE";

            var graph = new AmCharts.AmGraph();
            graph.valueField = "FREQ";
            graph.type = "smoothedLine";
            graph.theme = "light";
            chart.addGraph(graph);

            chart.write('chartdiv');
        });

        </script>          
    </head>
<body>
    <div> GRAPH HERE </div>
    <div id="chartdiv" style="width: 640px; height: 400px;"></div>
</body>
</html>

<小时>

更新的代码/工作解决方案

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/jsapi.js"></script>
        <script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
        <script src="http://www.amcharts.com/lib/3/serial.js"></script>
        <script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
        <script type="text/javascript">
            var db_query = <?php echo json_encode($db_query_1) ?>;
            var chart;
            var graph;

                /* chart initialization */
                var chart = AmCharts.makeChart("plot1", {
                    type: "serial",
                    categoryField: "OCCUR_DATE",
                    graphs: [{
                        type: "smoothedLine",
                        theme: "light",
                        valueField: "FREQ"
                    }]
                })

            $.ajax({
                type: 'POST',       
                url: "mySQL.php",
                data: {'db_que': db_query},
                dataType: 'json',
                context: document.body,
                global: false,
                async:true,
                success: function(data) {
                    //alert(data);
                    chart.dataProvider = data;
                    chart.validateNow();
                }
            });
        </script>          
    </head>
<body>
    <div> GRAPH HERE </div>
    <div id="plot1" style="width: 640px; height: 400px;"></div>
</body>
</html>

推荐答案

您可以先创建图表,然后在将异步请求的结果发送到您的数据库后分配值.

You can create the chart first and assign the values after getting the results from an asynchronous request to your DB.

试试这个:

/* chart initialization */
var chart = AmCharts.makeChart("chartdiv", {
    type: "serial",
    categoryField: "OCCUR_DATE",
    graphs: [{
        type: "smoothedLine",
        theme: "light",
        valueField: "FREQ"
    }]
})

/* Asynchronous request */
var db_query = <?php echo json_encode($$db_query_1) ?>;

$.ajax({
    type: 'POST',
    url: "mySQL.php",
    data: {'db_q': db_query},
    dataType: 'json',
    context: document.body,
    global: false,
    async: true,
    success: function(data) {
        chart.dataProvider = data;
        chart.validateNow();
    }
});

将请求数据类型更改为 JSON,这样您就不必使用 eval()

Changed the request datatype to JSON, so that you don't have to use eval()

这篇关于amcharts - 图形不显示值/使用 ajax 绘制 amcharrt/如何通过查询数据库绘制 amchart的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆