Question

我想通过使用从MySQL数据库获取的值来绘制高图。我从数据库中获得了价值，并成功编码成杰森，但是高等领域没有出现，你能帮助我吗？

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

我在json_encode函数中添加了JSON_NUMERIC_CHECK来将字符串解析为数字类型，但仍然无法正确显示高位图，你能帮助我吗？

==== 2016/10/06 update ====

我在这里上传了我的结果的屏幕截图，以显示我真正拥有从我的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
            }]
        });
    });
});

Answer 1

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

只需删除此行：

$。getJSON（＆＃39; highcharts.php＆＃39;，function（data）{}
从php设置变量get，将其放在<head>标记下。
将js代码粘贴到<head>标记下，而不是将highcharts.js调用到highcharts.php
在js

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

1 个答案: