之前学习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. Python笔记12-----画图Matplotlib

    1.matplotlib:pyplot和pylab 如: import pylab as pl pl.figure(figsize=(8,6),dpi=100)[建立的图像大小和图的精度] pl.pl ...

  2. sql2008删除语句.txt

    delete from [aixinxing].[dbo].[bbs2] where announceID in (select AnnounceID from [aixinxing].[dbo].[ ...

  3. 【JavaScript框架封装】实现一个类似于JQuery的基础框架、事件框架、CSS框架、属性框架、内容框架、动画框架整体架构的搭建

    /* * @Author: 我爱科技论坛 * @Time: 20180715 * @Desc: 实现一个类似于JQuery功能的框架 * V 1.0: 实现了基础框架.事件框架.CSS框架.属性框架. ...

  4. nyoj2-吝啬的国度

    吝啬的国度 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描述 在一个吝啬的国度里有N个城市,这N个城市间只有N-1条路把这个N个城市连接起来.现在,Tom在第S号城市,他有 ...

  5. 批量修改Linux系统密码

    截取主机IP地址最后一位数.匹配一组定义好的自定义密码.使用chpasswd修改主机账户密码 截图主机IP [root@web01 ~]# ip addr 1: lo: <LOOPBACK,UP ...

  6. gpio_request 原形代码

    http://blog.csdn.net/maopig/article/details/7428561 其原型为 int gpio_request(unsigned gpio, const char ...

  7. MNIST机器学习数据集

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

  8. 初步体验libsvm用法1(官方自带工具)

    在机器学习和模式识别领域,svm理论使用得很广泛,其理论基础是统计学习,但是如果我们的研究方向不是svm理论,我们只是利用已有的svm工具来对我们的任务进行分类和回归,那么libsvm是一个不错的选择 ...

  9. 使用Dropzone上传图片及回显演示样例

    一.图片上传所涉及到的问题 1.HTML页面中引入这么一段代码 <div class="row"> <div class="col-md-12" ...

  10. kaggle 中使用ipython

    # pandas import pandas as pd from pandas import Series,DataFrame # numpy, matplotlib, seaborn import ...