Highcharts从数据库中获取数据

问题描述 投票：2回答：4

我试图在Highchart上绘制我的数据库中的一些数据，但我似乎无法获得数据显示。

我有以下PHP（代码片段）从数据库获取数据并json_encodes它：

<?php

    $result = mysqli_query($cxn,"SELECT * FROM counter");

    while($row = mysqli_fetch_array($result)) {
        $value = $row['value'];
        $timestamp = strtotime($row['datetime']);
        $data[] = "[$value, $timestamp]";
    }   

    json_encode($data);

?>

json_encode打印以下内容（我正在使用datetime）：

["[500, 1384122794]","[600, 1384153203]"]

然后，我有以下图表来绘制数据：

<html>
    <body>
        <div id="container" style="height: 500px; min-width: 500px"></div>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script src="http://code.highcharts.com/stock/highstock.js"></script>
        <script>
            $(function() {
                $.getJSON('http://www.website.com/graph.php', function(data) { // I put website.com on purpose
                    // Create the chart
                    $('#container').highcharts('StockChart', {
                        rangeSelector : {
                            selected : 1
                        },

                        title : {
                            text : 'Title'
                        },

                        series : [{
                            name : 'AAPL',
                            data : data,
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                    });
                });

            });
        </script>
    </body>
</html>

问题是图表实际上没有显示点，它只是一个空白图。

我究竟做错了什么？

javascript php jquery json highcharts
4个回答
3
投票

为了回答我自己的问题，我将while循环更改为：

while($row = mysqli_fetch_array($result)) {
    $value = $row['value'];
    $timestamp = strtotime($row['datetime']) * 1000;
    $data[] = [$timestamp, (int)$value];
}
1
投票

问题是你返回字符串，你需要将数据作为数字返回。我建议熟悉json_encode（）标志，比如JSON_NUMERIC_CHECK。其次$data[] = "[$value, $timestamp]";线需要是数组而不是带打印支架的字符串。

0
投票

您想要将“数据”数组分配给错误的单列数据

看这里 ：

$(function () {
        $('#container').highcharts({
            title: {
                text: 'Monthly Average Temperature',
                x: -20 //center
            },
            subtitle: {
                text: 'Source: WorldClimate.com',
                x: -20
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                title: {
                    text: 'Temperature (°C)'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: '°C'
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: [{
                name: 'Tokyo',
                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
            }, {
                name: 'New York',
                data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
            }, {
                name: 'Berlin',
                data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
            }, {
                name: 'London',
                data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
            }]
        });
    });

一种解决方案是使用for循环并在每个循环中分配数据和名称

-1
投票

Step-1创建数据库[highchartdemo]

步骤2创建两个表[demo_viewer，demo_click]

CREATE TABLE IF NOT EXISTS `demo_viewer` (

  `id` int(11) NOT NULL AUTO_INCREMENT,

  `numberofview` int(11) NOT NULL,

  `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,

  PRIMARY KEY (`id`)

) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 ;


CREATE TABLE IF NOT EXISTS `demo_click` (

  `id` int(11) NOT NULL AUTO_INCREMENT,

  `numberofclick` int(12) NOT NULL,

  `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,

  PRIMARY KEY (`id`)

) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 ;

demo_viewer表：enter image description here

demo_click表：enter image description here

第3步 - 创建数据库配置文件config.php

    $dbHost = "localhost";

    $dbDatabase = "highchartdemo";

    $dbPasswrod = "root";

    $dbUser = "root";


    $mysqli = mysqli_connect($dbHost, $dbUser, $dbPasswrod, $dbDatabase);

?>

步骤4创建Index.php文件index.php

<?php


    require('config.php');


    /* Getting demo_viewer table data */

    $sql = "SELECT SUM(numberofview) as count FROM demo_viewer 

            GROUP BY YEAR(created_at) ORDER BY created_at";

    $viewer = mysqli_query($mysqli,$sql);

    $viewer = mysqli_fetch_all($viewer,MYSQLI_ASSOC);

    $viewer = json_encode(array_column($viewer, 'count'),JSON_NUMERIC_CHECK);


    /* Getting demo_click table data */

    $sql = "SELECT SUM(numberofclick) as count FROM demo_click 

            GROUP BY YEAR(created_at) ORDER BY created_at";

    $click = mysqli_query($mysqli,$sql);

    $click = mysqli_fetch_all($click,MYSQLI_ASSOC);

    $click = json_encode(array_column($click, 'count'),JSON_NUMERIC_CHECK);


?>


<!DOCTYPE html>

<html>

<head>

    <title>Highcharts get data from database</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>

    <script src="https://code.highcharts.com/highcharts.js"></script>

</head>

<body>


<script type="text/javascript">


$(function () { 


    var data_click = <?php echo $click; ?>;

    var data_viewer = <?php echo $viewer; ?>;


    $('#container').highcharts({

        chart: {

            type: 'column'

        },

        title: {

            text: 'Yearly Website Ratio'

        },

        xAxis: {

            categories: ['2013','2014','2015', '2016']

        },

        yAxis: {

            title: {

                text: 'Rate'

            }

        },

        series: [{

            name: 'Click',

            data: data_click

        }, {

            name: 'View',

            data: data_viewer

        }]

    });

});


</script>


<div class="container">

    <br/>

    <h2 class="text-center">Highcharts get data from database</h2>

    <div class="row">

        <div class="col-md-10 col-md-offset-1">

            <div class="panel panel-default">

                <div class="panel-heading">Graphical View</div>

                <div class="panel-body">

                    <div id="container"></div>

                </div>

            </div>
        </div>
    </div>
</div>
</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.