使用Highcharts生成折线图_at last

//数据库数据的读取,读取数据后数据格式的转换,还有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>

正能量。有图有真相。

时间: 2024-10-01 03:44:52

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

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

Highcharts是一款纯javascript和html5编写的图表库,不仅几乎能兼容所有pc浏览器,而且对ios和android手机端的兼容 性也不错,它能够很简单便捷的在Web网站或Web应用中添加交互性的图表,Highcharts目前支持直线图.折线图.面积图.柱状图.饼图.散点图 等多达28种不同类型的图表,还支持3D立体图表的生成,可以满足你对Web图表的任何需求 !而且Highcharts对学习者.非商业机构是免费使用的. 案例场景:要求针对技术cto网站,直观地显示一周网站pv.

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

1.首先新建一个.NET网站,如图所示: 2.引用所需要的js类库,如下图 highcharts.js可以在网上搜索就可以找到下载了. 3.在Default.aspx页面引用js 4.在 body 下添加一个<div id="container" style="width: 98%; height: 500px; margin: 0 auto"> , 前台代码如下 1 <script type="text/javascript"

HighCharts基本折线图

1.设计源码 <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head> <title>Hig

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

chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法,原文: 默认情况下如下图 Y轴并不是从0开始,这样折现图的幅度会很大,不是正常的幅度,解决办法如下, 示例代码: window.onload = function () { var ctx = document.getElementById("canvas").getContext("2d"); window.myLine = new Chart(ctx).Line(lineChartDat

快速生成折线图及代码详解

快速生成折线图时,只需要修改代码中的以下数据: 1.Y轴刻度个数:Ycounts 2.Y轴最小刻度数:YminValue 3.横坐标:数组mouth 4.标题:strTopic 5.用户数据:数组d 6.[可选]修改背景色:代码中27行改为所需要的颜色即可 完整代码: 1 using System; 2 using System.Collections.Generic; 3 using System.ComponentModel; 4 using System.Data; 5 using Sys

使用highcharts绘制折线图和曲线图

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

Highcharts之折线图

1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Highcharts折线图举例</title> 7 <script src="js/jquery-3.2.1.min.js"></script> 8 <script src="js/highcharts.js&qu

JFreeChart应用(生成折线图)

1.jar包,jcommon.jar和jfreechart.jar,具体用哪个版本官网去down吧: 还有另外一个jar包,gnujaxp.jar,这个引入之后编译的时候会报错,应该是xsd校验的问题,索性直接去掉了,不影响实现. 2.具体实现: public static void main(String [] args){ //数据源 String[] rk = getRowKeys(bid); double[][]data = getData(bid,rk); String[] colKe

python生成折线图

图形生成工具包 reportlab (下载地址:https://bitbucket.org/rptlab/reportlab/get/ddf3d4f5066a.zip) 数据地址:ftp://ftp.swpc.noaa.gov/pub/weekly/Predict.txt #! /usr/bin/env python #coding=utf-8 #sunspots_final.py from urllib import request from reportlab.graphics.shapes