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

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

2025-04-27 03:13:25

推荐回答（1个）

回答1：

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




    Test

复制代码

2、getDatas.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);
?>

三、资源下载

百度网盘下载：