如何在 php 中 ajax 成功后生成图形？答案

【问题标题】：How to generate graph after ajax success in php?如何在 php 中 ajax 成功后生成图形？
【发布时间】：2019-03-02 05:57:03
【问题描述】：

代码：

<?php 
    include('config.php'); 
?>
<html>
    <head>
        <style>
            html,
            body,
            #myChart {
                height: 100%;
                width: 100%;
            }
        </style>
    </head>
<body>

    <select id="jid">
        <option>Select Job</option>
        <option value="jid1">Java Developer</option>
        <option value="jid2">Dot Net Developer</option>
        <option value="jid3">PHP Developer</option>
    </select>
    <div id='myChart'></div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    <script>
    zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "ee6b7db5b51705a13dc2339db3edaf6d"];
    </script>
    <script>
        $(document).ready(function(){
            $("#jid").change(function(){
                jid = $(this).val();
                $.ajax({
                    type:"POST",
                    data:{"jid":jid},
                    url:"success.php",
                    success:function(data){
                        var myData = [data];
                        var myConfig = {
                            "graphset": [{
                                "type": "bar",
                                "title": {
                                    "text": "Resume Tracking System"
                                },
                                "scale-x": {
                                    "labels": ["Uploaded", "Shortlist", "Interview", "Final", "Offer"]
                                },
                                "series": [{
                                    "values": myData
                                }]
                            }]
                        };
                        zingchart.render({
                            id: 'myChart',
                            data: myConfig,
                            height: "100%",
                            width: "100%"
                        });
                    }
                });
            });
        });
    </script>
</body>
</html>

成功.php

<?php 
include('config.php');
$jid = $_POST['jid'];
$sql = mysqli_query($con,"select * from test where jid='".$jid."'");
while($row = mysqli_fetch_array($sql))
{
    echo $row['val'];
}

我正在尝试使用 jquery ajax 生成关于更改下拉值的动态图。现在，当我调用 ajax 成功值时我在这里做什么，然后它不会生成图形，而是手动输入值而不是 data 我输入 20 然后图形生成成功。我不知道为什么我做错了？请帮帮我。

谢谢

【问题讨论】：

有什么问题。ajax 请求的响应是什么？是否有任何控制台错误？支持错误？
问题是在更改下拉值时未生成图形，但如果我输入值而不是 var myData = [data] 到 var myData=[20]，则它会显示图形。它不适用于var myData = [data]@MadhawaPriyashantha
console.log(data); 看看data的内容是什么。它可能是未定义的或数组或不合适的格式。
我试过consol.log(data)，它在更改下拉列表时显示值@MadhawaPriyashantha
你能发布myData的值吗？console.log(myData );请显示确切的输出

标签： javascript php jquery ajax graph

【解决方案1】：

zingcharts 文档指出系列数据应采用以下格式：

{
  "type": "bar", /* or "vbar" */
  "series": [
    {"values":[20,40,25,50,15,45,33,34]},
    ]
}

console.log(myData) 并确保它匹配

【讨论】：