//数据库数据的读取，读取数据后数据格式的转换，还有highchart数据源的配置，伤透了脑筋。

anyway，最终开张了。哈哈！

数据库连接:conn_orcale.php

<?php

$dbconn=oci_connect("dnc-local","dnc-local","orcl")or die("数据库连接错误");

?>

读取数据:device_query.php

<?php

  require 'conn_orcale.php';

  $sql = "select * from xiaolv_month";

  $query = oci_parse($dbconn,$sql);

  oci_execute($query);

   <span style="color:#ff0000;">while( $a = oci_fetch_array($query))

   {

   	$b[] = intval($a[1]);

   }

    $data= json_encode($b);</span>

     oci_close($dbconn);

?>

或

<?php

  require 'conn_orcale.php';

  $sql = "select month,xiaolv from xiaolv_month";

  $query = oci_parse($dbconn,$sql);

  <span style="color:#ff0000;">$b=array();

   while( $a = oci_fetch_array($query))

   {

   	array_push($b,intval($a[1]));

   }

    echo json_encode($b);</span>

     oci_close($dbconn);

?>

使用Highcharts生成折线图:Test.php

<?php

  require 'device_query.php';

?>

<html>

<head>

<title>hello mnmlist!</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/highcharts.js"></script>

<script type="text/javascript" src="js/themes/gray.js"></script>

<script type="text/javascript" src="js/json_parse.js"></script>

<script type="text/javascript">

$(function () {

    $('#mnmlist').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

        },

        <span style="color:#ff0000;">series: [{

            name: 'xiaolv',

            data: <?

php echo $data;?>

        }]</span>

    });

});

</script>

</head>

<body>

<p><?

php echo $data."\n";?></p>

<div id="mnmlist" style="min-width:800px;height:400px"></div>

</body>

</html>

正能量。有图有真相。

使用Highcharts生成折线图_at last的更多相关文章

  1. 使用Highcharts生成折线图与曲线图

    折线图与曲线图可以显示随时间而变化的连续数据,因此非常适用于显示在相等时间间隔下数据的趋势.本文将结合Highcharts,生成一个城市气温变化折线图和一个随时间动态即时显示CPU走势的曲线图. 如果 ...

  2. chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法[bubuko.com]

    chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法,原文:http://bubuko.com/infodetail-328671.html 默认情况下如下图 Y轴并不是从0开始 ...

  3. HighCharts基本折线图

    1.设计源码 <!DOCTYPE html> <!-- To change this license header, choose License Headers in Projec ...

  4. 利用JFreeChart生成折线图 (4) (转自 JSP开发技术大全)

    利用JFreeChart生成折线图 (4) (转自 JSP开发技术大全) 14.4 利用JFreeChart生成折线图 通过JFreeChart插件,既可以生成普通效果的折线图,也可以生成3D效果的折 ...

  5. highcharts实例教程一：结合php与mysql生成折线图

    Highcharts是一款纯javascript和html5编写的图表库,不仅几乎能兼容所有pc浏览器,而且对ios和android手机端的兼容 性也不错,它能够很简单便捷的在Web网站或Web应用中 ...

  6. .NET 使用 Highcharts生成扇形图 柱形图

    1.首先新建一个.NET网站,如图所示: 2.引用所需要的js类库,如下图 highcharts.js可以在网上搜索就可以找到下载了. 3.在Default.aspx页面引用js 4.在 body 下 ...

  7. Highcharts之折线图

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. highcharts 柱状图 折线图 混合 双纵轴显示

    $(function () { $('#container').highcharts({ chart: { zoomType: 'xy' }, title: { text: '' }, colors: ...

  9. JFreeChart应用（生成折线图）

    1.jar包,jcommon.jar和jfreechart.jar,具体用哪个版本官网去down吧: 还有另外一个jar包,gnujaxp.jar,这个引入之后编译的时候会报错,应该是xsd校验的问题 ...

随机推荐

  1. js-权威指南学习笔记19

    第十九章 jQuery类库 1.传递HTML文本字符串给$()方法,jQuery会根据传入的文本创建好HTML元素并封装为jQuery对象返回. 2.想要遍历jQuery对象中的所有元素时,可以调用e ...

  2. vuex 管理vue-router的传值

    假设有这样的一种情况,在两个组件中.一个组件[A]主要是比如说放表格数据,而另外一个组件[B]是专门用来向组件A的表格添加数据的表单.这个时候就是两个兄弟组件之间传递数据了.首先想到的是使用兄弟组件传 ...

  3. eclipse以O开头的版本安装tomcat插件

    最近闲着无聊想着捣鼓下java web ,轻车熟路的在eclipse下载好IDE,有强迫症的我下载了最新版本的(2017-10),然而下载过来的IDE真的是纯净版的,连java web 的new pr ...

  4. arm64 调试环境搭建及 ROP 实战

    前言 比赛的一个 arm 64 位的 pwn 题,通过这个题实践了 arm 64 下的 rop 以及调试环境搭建的方式. 题目文件 https://gitee.com/hac425/blog_data ...

  5. java持有对象【1】容器类及ArrayList

    如果一个程序只包含固定数量的且其生命周期都是已知的对象,那么这是一个非常简单的程序.  ----------java编程思想第十一章引言 java有许多方式引用对象,例如学过的数组,他是编译器支持的类 ...

  6. Python基础一数据类型之数字类型

    摘要: python基础一中提到了数据类型,这里主要讲解的是数字类型. 数字类型: 1,整型 2,长整型 3,浮点型 4,复数型 1,整型(int) 定义a = 1 通过type函数查看数据类型,整型 ...

  7. 使用 Azure PowerShell 监视和更新 Windows 虚拟机

    Azure 监视使用代理从 Azure VM 收集启动和性能数据,将此数据存储在 Azure 存储中,并使其可供通过门户.Azure PowerShell 模块和 Azure CLI 进行访问. 使用 ...

  8. SQL Server 2014内存优化表的使用场景（转载）

    最近一个朋友找到走起君,咨询走起君内存优化表如何做高可用的问题 大家知道,内存优化表作为In-Memory OLTP功能是从SQL Server 2014开始引入,用来对抗Oracle 12C的In- ...

  9. SQL Server 合并复制如何把备份的发布端或订阅端BAK文件还原为数据库

    SQL Server的合并复制,是可以备份发布端和订阅端数据库为BAK文件的,但是问题是合并复制在数据库中自动创建的系统表.触发器.表中的RowGuid列等也会被一起备份. 这里我们举个例子,下面图中 ...

  10. SDN 第三次作业

    SDN 第三次作业 列举openflow1.0的12元组? 12元组 入端口(Ingress port) 源MAC地址(Ether Source) 目的MAC地址(Ether Des) 以太网类型(E ...