之前学习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. eclipse svn -- - --- appears to be part of a subversion 1.7 or greater....解决方法

    安装与svn1.7相兼容的flex Eclipse中的SVN(subclipse) 今天差点被TortoiseSVN1.7和subclipse弄崩溃... 还好最后弄好了,在此把方法写出来,以免其他人 ...

  2. bat执行bat文件

    目的:在服务器桌面创建一个bat文件执行tomcat下的startup.bat文件,这样就不用每次都去文件夹下找startup.bat文件 桌面bat文件内容: @echo off start D:\ ...

  3. spring mvc流程理解

    1.controller处理的终究就是一个结果,默认是modelandview对象,controller里自己随便调用service或者dao,终究都还是在controller里有返回值. 2.  在 ...

  4. Project Euler：Problem 88 Product-sum numbers

    A natural number, N, that can be written as the sum and product of a given set of at least two natur ...

  5. js 数组克隆

    在JS中,对于对象类型的变量的引用是通过类似C之类的"指针"的方式来操作的,及假设多个变量引用同一个对象,则随意一个变量对对象的操作都会影响到其他的变量. 这个可能不是非常明确,以 ...

  6. 【iOS开发-68】APP下载案例：利用tableView自带的cell布局+缓存池cell复用时注意button状态的检查

    (1)效果 (2)源码与资源下载 http://pan.baidu.com/s/1pJLo2PP (3)总结 --核心是利用UITableView里面自带的cell来制作样式同样的cell. 与之对应 ...

  7. 2015.03.16,外语,读书笔记-《Word Power Made Easy》 00 “如何最大限度的利用本书”学习笔记

    备注:蓝色表明是自己学习或笔记的部分,红色表明特别的地方,例如自己不理解或需要重点关注的地方.加粗单词表明是要加入生词库学习的词语.单词后面括号中的蓝色部分,是单词的解释和音标. 1.this is ...

  8. Qt 图像处理之 灰度变换

    对图像的亮度.对照度进行变换是非经常常使用的一种图像处理操作,可是Qt 本身却没有提供对应的功能代码.因此我写了个简单的类来实现这些操作.我把这个类称为 BrightnessMapper. 代码例如以 ...

  9. iOS9中，swift判断相机，相册权限，选取图片为头像

    在iOS7以后要打开手机摄像头或者相册的话都需要权限,在iOS9中更是更新了相册相关api的调用 首先新建一个swift工程,在SB中放上一个按钮,并在viewController中拖出点击事件 ok ...

  10. mysqil操作数据库

    mysqil操作数据库 每次用到mysql_connect连接数据库的时候都会提示: 1 Deprecated: mysql_connect(): The mysql extension is dep ...