之前学习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. node中exports和module.exports的关系及使用

    在node中,需要记住,在使用exports和module.exports的时候,实际输出的是module.exports. exports指向module.exports,是module.expor ...

  2. J2EE提高之知识清单

    Oracle数据库 JDBC事务 Spring事务 SOA XML/JSON redis/memcached 反射,类加载,JVM 工具类:UML, Maven, 性能类:CPU监控,memary监控 ...

  3. MNIST机器学习数据集

    介绍 在学习机器学习的时候,首当其冲的就是准备一份通用的数据集,方便与其他的算法进行比较.在这里,我写了一个用于加载MNIST数据集的方法,并将其进行封装,主要用于将MNIST数据集转换成numpy. ...

  4. ActiveMQ 发送和接收消息

    一.添加 jar 包 <dependency> <groupId>org.apache.activemq</groupId> <artifactId>a ...

  5. 数据库-mongodb-高级查询表达式

    不等于  $nq 1 2 SQL : select * where != 3 NOSQL : db.goods.find({cat_id:{$ne:3 }},{cat_id:1,id:0}); NOS ...

  6. BA--冷源系统原理图解

  7. centos: git clone提示Permission denied publickey 问题

    问题: Initialized empty Git repository in /data1/mouxuan/fastsocket-private/.git/ Permission denied (p ...

  8. SVN文件恢复

    SVN删除文件 一.本地删除 SVN删除文件里的本地删除,指的是在clientdelete了一个文件,但还没有commit.使用revert来撤销删除. 二.server删除 1.通过本地删除后提交s ...

  9. COCOS学习笔记--Cocod2dx内存管理(三)-Coco2d-x内存执行原理

    通过上两篇博客.我们对Cocos引用计数和Ref类.PoolManager类以及AutoreleasePool类已有所了解,那么接下来就通过举栗子来进一步看看Coco2d-x内存执行原理是如何的. / ...

  10. Android开发之大位图压缩水印处理

    我们在发微博或者csdn博文的时候都能够给图片加上一个水印.一个独立的标识,那是怎么实现的呢?先封装一个BitmapTools封装类.该类要解决的问题是一将突破存储至sdcard中,二给图片加上水印. ...