PHP mySQL Highcharts Json 数组答案

【问题标题】：PHP mySQL Highcharts Json arrayPHP mySQL Highcharts Json 数组
【发布时间】：2018-03-03 07:29:03
【问题描述】：

我正在尝试复制以下示例： http://theonlytutorials.com/highcharts-load-json-data-via-ajax-php/

在此示例中，文件“data.php”的输出如下选择id=1：

[{"name":"male","data":[100,500,300]},{"name":"female","data":[75,550,250]}]

我想在 highcharts 中构建散点图。为了简单起见，我使用示例数据。数据需要采用以下格式：

[{"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 代码来获得这个结果？

希望你能帮助我！

【问题讨论】：

标签： php mysql json highcharts

【解决方案1】：

这很容易实现。在您的情况下，您希望一次获取所有数据并创建单独的散点系列，每行有一个点。 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);
?>

另外，您不需要选择下拉列表，所以index.html 可以如下所示：

<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: 'rgba(223, 83, 83, .5)'}, {"name ":"2","data":[[500,550]],color: 'rgba(223, 83, 83, .5)'} 等。再次感谢这对我帮助很大！
我找到了解决方案。再次感谢！