Javascript 在php中ajax成功后如何生成图形？_Javascript_Php_Jquery_Ajax_Graph

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

javascript php jquery ajax graph

Javascript 在php中ajax成功后如何生成图形？,javascript,php,jquery,ajax,graph,Javascript,Php,Jquery,Ajax,Graph,代码： html，身体， #我的图表{ 身高：100%；宽度：100%； } 选择工作 Java开发者网络开发者 PHP开发人员 zingchart.MODULESDIR=”https://cdn.zingchart.com/modules/"; ZC.LICENSE=[“569d52cefae586f634c54f86dc99e6a9”，“ee6b7db5b51705a13dc2339db3edaf6d”]； $（文档）.ready（函数（）{ $（“#jid”）.change（fun

代码：


html，
身体，
#我的图表{
身高：100%；
宽度：100%；
}
选择工作
Java开发者
网络开发者
PHP开发人员
zingchart.MODULESDIR=”https://cdn.zingchart.com/modules/";
ZC.LICENSE=[“569d52cefae586f634c54f86dc99e6a9”，“ee6b7db5b51705a13dc2339db3edaf6d”]；
$（文档）.ready（函数（）{
$（“#jid”）.change（function（）{
jid=$（this.val（）；
$.ajax({
类型：“POST”，
数据：{“jid”：jid}，
url:“success.php”，
成功：功能（数据）{
var myData=[data]；
变量myConfig={
“图形集”：[{
“类型”：“条”，
“标题”：{
“文本”：“简历跟踪系统”
},
“scale-x”：{
“标签”：[“上传”、“入围名单”、“面试”、“最终”、“报价”]
},
“系列”：[{
“值”：myData
}]
}]
};
zingchart.render({
id:'我的图表'，
资料来源：myConfig，
高度：“100%”，
宽度：“100%”
});
}
});
});
});

success.php

<?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>

zingcharts文档说明系列数据应采用以下格式：

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

console.log（myData）并确保它与问题相匹配。ajax请求的响应是什么？是否有控制台错误？备份的错误？问题是更改下拉值时不会生成图形，但如果我将value而不是

var myData=[data]

输入到

var myData=[20]

，则会显示图形。它不使用

var myData=[data]

@MadhawaPriyashantha

console.log（data）

并查看数据的内容。它可能是未定义的或数组或不适合的格式。我尝试了

consol.log（data）

，它在更改下拉列表@madhawapriyashantach时显示值。您可以发布

myData

？

console.log（myData）的值请显示准确的输出
{
  "type": "bar", /* or "vbar" */
  "series": [
    {"values":[20,40,25,50,15,45,33,34]},
    ]
}