之前学习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. There are no packages available for installation. Sublime3解决方法

    最近在学习Vue,在配置sublime3的时候,想要高亮vue的语法,下载点插件 Package Control的时候,总报  There are no packages available for ...

  2. EL表达式取整问题

    一般来说我们是无法实现EL表达式取整的.对于EL表达式的除法而言,他的结果是浮点型. 如:${6/7},他的结果是:0.8571428571428571.对于这个我们是无法直接来实现取整的. 这时就可 ...

  3. 警告: [SetPropertiesRule]{Server/Service/Engine/Host/Context} Setting property 'source' to 'org.eclips

    警告: [SetPropertiesRule]{Server/Service/Engine/Host/Context} Setting property 'source' to 'org.eclips ...

  4. C#中的文本乱码问题

    文本乱码问题 //提供一种解决C#文本乱码的解决思路 //写入使用: string str; str = this.menu.Text; string fname = Application.Star ...

  5. POJ 2189

    P是端点,牛在区域中啊... #include <iostream> #include <cstdio> #include <cstring> #include & ...

  6. POJ 3613

    可以利用DP的思想来做,不过是在DP时加上了矩阵乘法的思想而已,但乘法不是真的乘法,而是mp[a][i]+mp[i][b]<mp[a][b]则更新,其实更像FLOYD. 但这是符合乘法的格式的. ...

  7. pl/sql输入括号后卡顿的解决方式

    pl/sql输入括号后卡顿的解决方式 学习了:https://zhidao.baidu.com/question/298275368.html 工具->首选项->用户界面->代码助手 ...

  8. 经验之谈—OAuth授权流程图

    事实上我们在开发中,常常须要解决获得用户的一些特定的数据,比方:能够选择使用微博登陆.使用QQ登陆等等.然后我们间接的获得用户的头像.昵称等信息.这些都涉及到OAuth授权的内容 OAuth授权有这么 ...

  9. 图像算法研究---Adaboost算法具体解释

    本篇文章先介绍了提升放法和AdaBoost算法.已经了解的可以直接跳过.后面给出了AdaBoost算法的两个样例.附有详细计算过程. 1.提升方法(来源于统计学习方法) 提升方法是一种经常使用的统计学 ...

  10. UVALive 6663 Count the Regions 离散+bfs染色_(:зゝ∠)_

    题目链接:option=com_onlinejudge&Itemid=8&page=show_problem&problem=4675">点击打开链接 gg.. ...