如何使用从 MySQL 数据库中获取的数据绘制 highcharts答案

【问题标题】：How to draw the highcharts by using the data got from MySQL database如何使用从 MySQL 数据库中获取的数据绘制 highcharts
【发布时间】：2017-02-12 08:44:20
【问题描述】：

我想使用从 MySQL 数据库中获取的值来绘制一个高图。我从数据库中获取值并成功编码为 jason，但没有出现 highcharts，您能帮帮我吗？

====2016/10/05 更新====

我在我的 json_encode 函数中添加 JSON_NUMERIC_CHECK 以将字符串解析为数字类型，但仍然无法正确显示 highcharts，您能帮帮我吗？

====2016/10/06 更新====

我在这里上传了我的结果截图，以表明我确实拥有从我的 apache 服务器获取的数据的正确 json 格式。左侧是我的代码，突出显示的第 25 行在屏幕截图的右侧显示了我的结果。你可以看到我从数据库中解析出来的json格式的结果是[3,2,6,9,5]。为什么我的网页下方没有高图？

这里截图↓↓↓↓↓

数据库↓

CREATE TABLE `db` (
  `name` varchar(2) DEFAULT NULL,
  `status` varchar(6) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

INSERT INTO `db` (`name`, `status`) VALUES
('dd', 'done'),
('ee', 'done'),
('dd', 'done'),
('aa', 'done'),
('cc', 'done'),
('ee', 'done'),
('cc', 'done'),
('dd', 'done'),
('cc', 'done'),
('ee', 'done'),
('bb', 'done'),
('dd', 'done'),
('ee', 'done'),
('cc', 'done'),
('dd', 'done'),
('dd', 'done'),
('dd', 'done'),
('ee', 'done'),
('cc', 'done'),
('cc', 'change'),
('aa', 'change'),
('aa', 'change'),
('dd', 'change'),
('bb', 'change'),
('dd', 'change');

index.php↓

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>

  <h2 align="center">INDEX</h2>



<form action="highcharts.php">
    <input type="submit" name="submit_schedule" value="View_highcharts">
</form>

</body>
</html>

highcharts.php↓

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <!--invoke jquery first then highcharts libraries when you use highcharts to draw the plot.-->
    <script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
    <script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script>
    <script type="text/javascript" src="highcharts.js"> <!--put .js file in c:\xampp\htdocs-->
</script>

</head>

<body>
    <h2 align="center">HighCharts.js demo</h2>

   <?php
    echo "JSON WORKS↓↓↓<br><br>";
    $sth = mysqli_query(new mysqli("localhost","root","","ask"), "select distinct name, count(status) as number from db group by name");
    $rows = array();
    while($r = mysqli_fetch_assoc($sth)) {
        $rows[] = $r['number'];
    }
    json_encode($rows);
    $rows_json = json_encode($rows, JSON_NUMERIC_CHECK);
    print "this line is rows_json: $rows_json";
    echo "<br><br>JSON WORKS↑↑↑";
    ?>

    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

highcharts.js↓

$(function () {
    $.getJSON('highcharts.php', function(data) {
            $("#container").highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'js_demo'
            },
            xAxis: {
                categories: ['aa', 'bb', 'cc', 'dd', 'ee']
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'number of count'
                },
                stackLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'bold',
                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                    }
                }
            },
            legend: {
                align: 'right',
                x: -30,
                verticalAlign: 'top',
                y: 25,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
            },
            tooltip: {
                headerFormat: '<b>{point.x}</b><br/>',
                pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                        style: {
                            textShadow: '0 0 3px black'
                        }
                    }
                }
            },
            series: [{
                name: 'done',
                data: data
            }]
        });
    });
});

【问题讨论】：

您的数据是什么样的？你有正确的 Highcharts 格式吗？
从数据库中获取并编码成json后的样子：["3","2","6","9","5"]
所以你有字符串而不是数字？也许尝试将它们解析为数字？
感谢@GrzegorzBlachliński 的评论。在json_encode 函数中添加JSON_NUMERIC_CHECK 后，字符串解析为数字（看起来像[3,2,6,9,5]），但highcharts 仍然不起作用。还有其他帮助吗？
你的控制台有错误吗？

标签： php mysql json highcharts

【解决方案1】：

我找到了我的问题的解决方案：

只需删除这一行：

$.getJSON('highcharts.php', 函数(数据) {}
设置变量get from php，放在<head>标签下。
将<head>标签下的js代码粘贴到highcharts.php中，而不是调用highcharts.js
在js中回显series对象中的变量

【讨论】：