如何让highcharts折线图读取数据库json格式数据并在图表上显示？

如何让highcharts折线图读取数据库json格式数据并在图表上显示？本人是菜鸟一枚，最近在做一个项目遇到这样的问题，项目要求是读取数据库里的json格式数据，但是我... 如何让highcharts折线图读取数据库json格式数据并在图表上显示？本人是菜鸟一枚，最近在做一个项目遇到这样的问题，项目要求是读取数据库里的json格式数据，但是我做的highcharts折线图最多只能做到通过ajax读取本地json格式文件里的数据，做不到读取数据库里的json格式数据。希望各位大大能告知小弟，万分感激~为了让解答的各位能充分了解我的情况，我会截图，麻烦各位大大了~
希望能提供代码，谢谢展开





 我来答

1个回答

#热议# 应届生在签三方时要注意什么？

简数科技
2018-03-11 · 超过83用户采纳过TA的回答

知道小有建树答主

回答量：204

采纳率：66%

帮助的人：53.8万

我也去答题访问个人页

关注

展开全部

Highcharts与Ajax结合实现实时刷新图表——PHP版

参考网址：网页链接

参考官网：网页链接

一、环境及sql

开发语言：php+Jquery
数据库：mysql
数据表结构：

Sql语句：

use test;
CREATE TABLE `test` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `datetime` char(10) NOT NULL,
  `data` double DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=31 DEFAULT CHARSET=latin1;
insert into test (datetime,data) values 
('2013-10-01',20.5),('2013-10-02',23.7),('2013-10-03',22.4),('2013-10-04',29.0),('2013-10-05',22.2),
('2013-10-06',22.6),('2013-10-07',26.9),('2013-10-08',28.0),('2013-10-09',24.1),('2013-10-10',27.1),
('2013-10-11',23.6),('2013-10-12',28.8),('2013-10-13',22.4),('2013-10-14',23.6),('2013-10-15',24.2),
('2013-10-16',22.6),('2013-10-17',26.2),('2013-10-18',28.2),('2013-10-19',21.7),('2013-10-20',25.2),
('2013-10-21',25.0),('2013-10-22',21.6),('2013-10-23',25.7),('2013-10-24',21.7),('2013-10-25',22.2),
('2013-10-26',25.6),('2013-10-27',26.2),('2013-10-28',26.0),('2013-10-29',23.2),('2013-10-30',22.4);

二、基本思路及代码
基本思路

文件结构（后面下载可获取）

主要代码：
1、test.html

<!DOCTYPE HTML>
<html>
<head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="js/highcharts.js"></script>
    <script>
    //图表属性，不包含数据
    var options = {
        chart: {
            renderTo: 'container',
            type: 'spline',
        },
        title: {
            text: '实时温度曲线',
            x: -20 //center
        },
        xAxis: {},
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        series: [{
            name: '温度',
        }],
        tooltip: {
            valueSuffix: '°C'
        },
        plotOptions: {
            spline: {
                dataLabels: {
                    enabled: true
                },
                animation: false,
            },
        },
    };
    //初始函数，设置定时器，定时取数据
    $(function() {
        queryData(0);
        var i = 0;
        var timer = setInterval(function() {
            i++;
            if (i >= 3) {
                i = 0;
            }
            queryData(i);
        }, 3000);
        //停止刷新
        $("button").click(function() {
            clearInterval(timer);
        });
    });
    var categories = [];
    var datas = [];
    //Ajax 获取数据并解析创建Highcharts图表
    function queryData(index) {
        $.ajax({
            url: 'getDatas.php?index=' + index,
            type: 'get',
            dataType: "json",
            success: function(data) {
                $.each(data, function(i, n) {
                    categories[i] = n[1];
                    datas[i] = n[2] * 1;
                });
                options.xAxis.categories = categories;
                options.series[0].data = datas;
                chart = new Highcharts.Chart(options);
            }
        });
    }
    </script>
</head>
<body>
    <div id="container" style="min-width:800px;height:400px;"></div>
    <p align=center>
        <button>停止刷新</button>
    </p>
</body>
</html>

复制代码

2、getDatas.php

<?php
        $db_name = "test";
        $db_host = "localhost";
        $db_user = "root";
        $db_pass = "root";
                
        $index = 0;
        if(isset($_GET['index'])) {
                $index = (int)$_GET['index'];
        } 
        
        $link = mysql_connect($db_host,$db_user,$db_pass) or die("Can't connect DB");
        $db = mysql_select_db($db_name);
        mysql_query("set names utf8");
        
        $result =mysql_fetch_row(mysql_query("select count(*) from test"));
        $pages = ((int)($result[0]))/10;
        if($index > ($pages-1)) {
                $index = ($pages-1);
        }
        
        $select = "select * from test limit ".($index*10).",10";
        $result = mysql_query($select);
        
        $datas = array();
        
        while($row = mysql_fetch_row($result)) {
                $datas[] = $row;
        }
        
        echo json_encode($datas);
?>