PHP mySQL Highcharts Json数组_Php_Mysql_Json_Highcharts

PHP mySQL Highcharts Json数组

php mysql json highcharts

PHP mySQL Highcharts Json数组,php,mysql,json,highcharts,Php,Mysql,Json,Highcharts,我试图复制以下示例：在本例中，选择id=1时，文件data.php的输出如下所示：我想在海图中建立一个散点图。为了保持简单，我使用了示例数据。数据需要采用以下格式： [{"name":"1","data":[[100,75]]}, {"name":"2","data":[[500,550]]}, {"name":"3","data":[[300,250]]}, {"name":"4","data":[[510,501]]}, {"name":"5","data":[[654,654]]},

我试图复制以下示例：

在本例中，选择id=1时，文件data.php的输出如下所示：

我想在海图中建立一个散点图。为了保持简单，我使用了示例数据。数据需要采用以下格式：

[{"name":"1","data":[[100,75]]},
{"name":"2","data":[[500,550]]},
{"name":"3","data":[[300,250]]},
{"name":"4","data":[[510,501]]},
{"name":"5","data":[[654,654]]},
{"name":"6","data":[[878,987]]},
{"name":"7","data":[[600,500]]},
{"name":"8","data":[[300,600]]},
{"name":"9","data":[[654,515]]}]

我的问题是如何调整data.php文件中的MySQL代码以获得此结果

希望你能帮助我

这很容易实现。在本例中，您希望一次获取所有数据，并创建单独的散点序列，每行一个点。data.php中的代码可以如下所示：

<?php
//connect to database
$con = mysqli_connect("localhost","root","","highcharts");

if (mysqli_connect_errno()) {
    die('Could not connect: ' . mysqli_connect_error());
}

$arr = array();
$arr1 = array();
$result = array();

$sql = "select * from highcharts_data";
$q = mysqli_query($con, $sql);

while($row = mysqli_fetch_assoc($q)){
    $arr['name'] = $row['h_id'];
    $arr['data'] = array([(float)$row['male'], (float)$row['female']]);

    array_push($result, $arr);
}
echo json_encode($result);

mysqli_close($con);
?>

<html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
    <style>
        #dynamic_data{
            border: 1px solid gray;
            border-radius: 10px;
            padding: 10px;
            text-decoration:none;
            float:left;
            margin:4px;
            text-align:center;
            display: block;
            color: green;
        }
    </style>
    <script>
        $(function () {
            (function getAjaxData(){

                //use getJSON to get the dynamic data via AJAX call
                $.getJSON('data.php', function(chartData) {
                    $('#container').highcharts({
                        chart: {
                            type: 'scatter'
                        },
                        title: {
                            text: 'Highcharts - Pulling data from PHP using Ajax'
                        },
                        yAxis: {
                            min: 0,
                            title: {
                                text: 'Value'
                            }
                        },
                        series: chartData
                    });
                });
            })();
        });
    </script>
    </head>

    <body>
        <h3><a href="http://blog.theonlytutorials.com/highcharts-load-json-data-via-ajax-php/">Go back to the Tutorial</a></h3>
        <div id="container" style="width: 50%;min-width: 310px; height: 400px; margin: 0 auto"></div>
    </body>
</html>

嗨，保罗，这正是我想要的答案。再次感谢！我不知道是否可以提出补充质询？但是有没有可能得到相同的输出，但是使用以下组件：[{name:1，data:[[100,75]]，color:'rgba223,83,83,5'}，{name:2，data:[500550]]，color:'rgba223,83,83,5'}，等等。再次感谢这真的对我帮助很大！！我找到了解决方案。再次感谢！

<html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
    <style>
        #dynamic_data{
            border: 1px solid gray;
            border-radius: 10px;
            padding: 10px;
            text-decoration:none;
            float:left;
            margin:4px;
            text-align:center;
            display: block;
            color: green;
        }
    </style>
    <script>
        $(function () {
            (function getAjaxData(){

                //use getJSON to get the dynamic data via AJAX call
                $.getJSON('data.php', function(chartData) {
                    $('#container').highcharts({
                        chart: {
                            type: 'scatter'
                        },
                        title: {
                            text: 'Highcharts - Pulling data from PHP using Ajax'
                        },
                        yAxis: {
                            min: 0,
                            title: {
                                text: 'Value'
                            }
                        },
                        series: chartData
                    });
                });
            })();
        });
    </script>
    </head>

    <body>
        <h3><a href="http://blog.theonlytutorials.com/highcharts-load-json-data-via-ajax-php/">Go back to the Tutorial</a></h3>
        <div id="container" style="width: 50%;min-width: 310px; height: 400px; margin: 0 auto"></div>
    </body>
</html>