之前学习highcharts发现网上的教程大部分是对highcharts数据的注释，如何动态绘制数据大部分一笔带过，让那些初涉开发的小白云里雾里，所以我就写了一篇这样的博客。

<html>

    <head>

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

                <title>测试</title>

        <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>

        <script src="js/highcharts.js"></script>

        <script src="js/exporting.js"></script>

        <script>

            var chart;

$(function() {

     var url="test.php";// 后台路径

                var std=document.getElementById('std').value;

                var end=document.getElementById('end').value;

                var day="";

                var beij="";

                var  guangz="";

                $.ajax({

              type: "POST",

              url: url,

             async:false,// 异步发送数据,默认是true，如果不加可能会出错

              data: {"std":std,"end":end},

              success: function(data){

                                var dat=JSON.parse(data);

                                day=dat.day;

                                beij=dat.beij;

                                guangz=dat.guangz;

              }

          });

    $('#container').highcharts({

        chart: {

            renderTo: 'chart_line', //图表放置的容器，DIV

            defaultSeriesType: 'line', //图表类型line(折线图),

            zoomType: 'x'   //x轴方向可以缩放

        },

        credits: {

            enabled: false   //右下角不显示LOGO

        },

        title: {

            text: '主要城市月平均气温' //图表标题

        },

        subtitle: {

            text: '2011年'  //副标题

        },

        xAxis: {  //x轴

            categories: day, //x轴标签名称

            gridLineWidth: 1, //设置网格宽度为1

            lineWidth: 2,  //基线宽度

            labels:{y:26}  //x轴标签位置：距X轴下方26像素

        },

        yAxis: {  //y轴

            title: {text: '平均气温(°C)'}, //标题

            lineWidth: 2 //基线宽度

        },

        plotOptions:{ //设置数据点

            line:{

                dataLabels:{

                    enabled:true  //在数据点上显示对应的数据值

                },

                enableMouseTracking: false //取消鼠标滑向触发提示框

            }

        },

        legend: {  //图例

            layout: 'horizontal',  //图例显示的样式：水平（horizontal）/垂直（vertical）

            backgroundColor: '#ffc', //图例背景色

            align: 'left',  //图例水平对齐方式

            verticalAlign: 'top',  //图例垂直对齐方式

            x: 100,  //相对X位移

            y: 70,   //相对Y位移

            floating: true, //设置可浮动

            shadow: true  //设置阴影

        },

        exporting: {

            enabled: false  //设置导出按钮不可用

        },

        series: [{  //数据列

            name: '北京',

            data: beij

        },

        {

            name: '广州',

            data: guangz

        }]

    });

});

        </script>

    </head>

    <form action="#" method="post">

        <span id="sp2">

                开始时间:<input type="text" name="startDay" id="std"/>

                结束时间：<input type="text" name="endDay" id="end"/>

                </span>

                <input type="submit" value="查询" name="chaxun"/>

</form>

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

</html>

在后台的代码我就不贴了，无非就是判断一下起始时间和结束时间是否为空，如果不为空就从数据库中查出来，使用将数据转化成json数据发到前端。

参考博客地址：http://www.helloweba.com/view-blog-157.html

使用highcharts动态绘制折线图——so easy的更多相关文章

  1. 用echartsjs 实现动态绘制折线、柱状等图形，并实现多图联动效果

    echarts对于大数据处理后绘制折线图,柱形图等等的效果和速度都很好.下面我们介绍 怎么把封装的数据列表解析出来,动态绘图,并且实现鼠标联动效果引入js文件: <script type=&qu ...

  2. Android自定义控件 -Canvas绘制折线图(实现动态报表效果)

    有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas ...

  3. HighCharts实现多数据折线图分列显示

    HighCharts实现多数据折线图分列显示 BY ZYZ HighCharts是一个很好用的web端绘图插件,用起来很方便,它的官方支持很好.并且有中文API(不全然).画出来的图像也挺美丽的. 近 ...

  4. Android自己定义组件系列【9】——Canvas绘制折线图

    有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了非常多插件,可是非常多时候我们须要依据详细项目自己定义这些图表,这一篇文章我们一起来看看怎样在Android中使用Can ...

  5. 【Android开源框架】使用andbase开发框架实现绘制折线图

    在Android中,当有绘制折线图的需求时.大多数人使用的AChartEngine,来进行折线图的绘制.AChartEngine图表引擎确实能够实现折线图的功能.除此之外,我们还能够使用andbase ...

  6. 用canvas绘制折线图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. php中用GD绘制折线图

    php中用GD绘制折线图,代码如下: Class Chart{ private $image; // 定义图像 private $title; // 定义标题 private $ydata; // 定 ...

  8. UUChart的使用--iOS绘制折线图

    UUChart是一个用于绘制图表的第三方,尤其适合去绘制折线图. 二.下载地址: https://github.com/ZhipingYang/UUChartView 三.使用 第一步.首先我们将下载 ...

  9. html5绘制折线图

    html5绘制折线图详细代码 <html> <canvas id="a_canvas" width="1000" height="7 ...

随机推荐

  1. 基于fullpage的自动播放，手动播放，暂停页面的功能

    功能如下: 1.默认加载方式为“自动播放 ”方式,即从第1屏至第5屏 页面循环加载显示,每屏每次仅显示1个页面,页面间停留时间为“10”秒2.手动播放过程中,按数字键“1”-“5”,将直接切到指定页面 ...

  2. Project Euler 8 Largest product in a series

    题意:寻找这 1000 个数中相邻 13 个数相乘积最大的值 思路:首先想到的是暴力,但是还可以利用之前记录过的数值,什么意思呢?即在计算 2 - 14 后,再计算 3 - 15 时完全可以利用之前计 ...

  3. [BZOJ1999] 树网的核 [数据加强版] (树的直径)

    传送门 如果只是想验证算法正确性这里是洛谷数据未加强版 Description 设T=(V, E, W) 是一个无圈且连通的无向图(也称为无根树),每条边带有正整数的权,我们称T为树网(treenet ...

  4. 分析Ajax来爬取今日头条街拍美图并保存到MongDB

    前提:.需要安装MongDB 注:因今日投票网页发生变更,如下代码不保证能正常使用 #!/usr/bin/env python #-*- coding: utf-8 -*- import json i ...

  5. Nginx 安装配置证书，设置HTTPS站点

    详细配置如下: server { listen 80; server_name shwww.net www.shwww.net; return 301 https://www.shwww.net$re ...

  6. 洛谷 U6254 最低费用

    U6254 最低费用 题目背景 小明暑假去国外游玩,到了最后一天,却发现自己的钱还不一定够去机场,于是他开始对国外特殊的交通方式进行研究,但是他发现路段的错综复杂使他头脑昏花,于是他打开电脑,希望你去 ...

  7. [HTML5] a tag, rel="noopener"

    It is a good pratice to add ref="noopener" <a href="/some/domain" target=&quo ...

  8. PPAPI插件与浏览器的通信

    PPAPI的插件,原本是能够使用JS与浏览器交互的,https://code.google.com/p/ppapi/wiki/InterfacingWithJavaScript.这里还提供了一个JS与 ...

  9. Windows 8.1内置微软五笔输入法

    微软五笔输入法採用86版编码,不是Windows 8.1系统的中文语言的缺省输入法,你在使用它之前须要把它加入到系统输入法中. 在控制面板双击"",然后加入微软五笔输入法. wat ...

  10. Mina airQQ聊天 client篇（三）

    开发工具 (FlashBuilder4.7) 程序类型(Adobe Air) Flex Air做的桌面程序,效果还挺好看的.最主要是Socket这一块,它也是异步的,而且在Flex中的事件机制比較强大 ...