HighCharts中的Ajax请求的2D折线图

设计源码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HighCharts 2D带Label的折线图</title>
<script type="text/javascript" src="../scripts/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../scripts/js/highcharts.js"></script>
<script type="text/javascript">
     $(function(){
    	    // 获取CSV数据并且创建图
    	    $.get('data/lineAjax.csv', function (csv) {

    	        $('#lineAjaxChart').highcharts({

    	            data: {
    	                csv: csv
    	            },

    	            title: {
    	                text: '折线'
    	            },
    	            xAxis: {
    	                type: 'datetime',
    	                tickInterval: 7 * 24 * 3600 * 1000, // one week
    	                tickWidth: 0,
    	                gridLineWidth: 1,
    	                labels: {
    	                    align: 'left',
    	                    x: 3,
    	                    y: -3
    	                }
    	            },

    	            yAxis: [{ // 主Y轴
    	                title: {
    	                    text: null
    	                },
    	                labels: {
    	                    align: 'left',
    	                    x: 3,
    	                    y: 16,
    	                    formatter: function() {
    	                        return Highcharts.numberFormat(this.value, 0);
    	                    }
    	                },
    	                showFirstLabel: true
    	            }, { // 次Y轴
    	                linkedTo: 0,
    	                gridLineWidth: 0,
    	                opposite: true,
    	                title: {
    	                    text: null
    	                },
    	                labels: {
    	                    align: 'right',
    	                    x: -3,
    	                    y: 16,
    	                    formatter: function() {
    	                        return Highcharts.numberFormat(this.value, 0);
    	                    }
    	                },
    	                showFirstLabel: false
    	            }],

    	            legend: {
    	                align: 'left',
    	                verticalAlign: 'top',
    	                y: 20,
    	                floating: true,
    	                borderWidth: 0
    	            },

    	            tooltip: {
    	                shared: true,
    	                crosshairs: true
    	            },

    	            plotOptions: {
    	                series: {
    	                    cursor: 'pointer',
    	                    point: {
    	                        events: {
    	                            click: function() {
    	                                hs.htmlExpand(null, {
    	                                    pageOrigin: {
    	                                        x: this.pageX,
    	                                        y: this.pageY
    	                                    },
    	                                    headingText: this.series.name,
    	                                    maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':<br/> '+
    	                                        this.y +' visits',
    	                                    width: 200
    	                                });
    	                            }
    	                        }
    	                    },
    	                    marker: {
    	                        lineWidth: 1
    	                    }
    	                }
    	            },

    	            series: [{
    	                name: 'All visits',
    	                lineWidth: 4,
    	                marker: {
    	                    radius: 4
    	                }
    	            }, {
    	                name: 'New visitors'
    	            }]
    	        });
    	    });
     });
</script>
</head>
<body>
   <div id="lineAjaxChart" style="width: 1200px; height: 500px; margin: 0 auto"></div>
</body>
</html>

HighCharts中的Ajax请求的2D折线图的更多相关文章

  1. HighCharts中的无主题的2D折线图

    HighCharts中的无主题的2D折线图 1.设计源码 <!DOCTYPE html> <html> <head> <meta charset=" ...

  2. PHP--------TP中的ajax请求

    PHP--------TP中的ajax请求 以jQuery中的ajax为例: (1)引入jQuery 通过模板替换表示路径,我们可以自定义模板替换变量(在config中定义) /*自定义模板替换标签* ...

  3. javascrpt 中的Ajax请求

    回顾下javascript中的Ajax请求,写一个小例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...

  4. ASP.NET Core Razor中处理Ajax请求

    如何ASP.NET Core Razor中处理Ajax请求 在ASP.NET Core Razor(以下简称Razor)刚出来的时候,看了一下官方的文档,一直没怎么用过.今天闲来无事,准备用Rozor ...

  5. HighCharts之2D折线图

    HighCharts之2D折线图 1.HighCharts之2D折线图源码 line.html: <!DOCTYPE html> <html> <head> < ...

  6. Flex中的FusionCharts 2D折线图

    Flex中的FusionCharts 2D折线图 1.设计源码 LineChart.mxml: <?xml version="1.0" encoding="utf- ...

  7. 关于JQuery中的ajax请求或者post请求的回调方法中的操作执行或者变量修改没反映的问题

    前段时间做一个项目,而项目中所有的请求都要用jquery 中的ajax请求或者post请求,但是开始处理一些简单操作还好,但是自己写了一些验证就出现问题了,比如表单提交的时候,要验证帐号的唯一性,所以 ...

  8. [Web 前端] 如何在React中做Ajax 请求？

    cp from : https://segmentfault.com/a/1190000007564792 如何在React中做Ajax 请求? 首先:React本身没有独有的获取数据的方式.实际上, ...

  9. Struts2 在登录拦截器中对ajax请求的处理

    前言: 由于ajax请求不像http请求,可以直接进行页面跳转,你返回的所有东西,ajax都只会识别为一个字符串. 之前尝试的方法是在拦截器中返回一个标识给ajax,然后再在每一个ajax请求成功之后 ...

随机推荐

  1. 【原创】源码角度分析Android的消息机制系列（二）——ThreadLocal的工作过程

    ι 版权声明:本文为博主原创文章,未经博主允许不得转载. 在上一篇文章中,我们已经提到了ThreadLocal,它并非线程,而是在线程中存储数据用的.数据存储以后,只能在指定的线程中获取到数据,对于其 ...

  2. 如何实现Selenium自动化读取H5手机缓存

    更多原创测试技术文章同步更新到微信公众号 :三国测,敬请扫码关注个人的微信号,感谢! 原文链接:http://www.cnblogs.com/zishi/p/6890675.html 前言: 由于Se ...

  3. web.xml组件加载顺序

    在配置项目组件的过程中, 了解Tomcat加载组件顺序很有必要. 例如某些框架如Quartz的集群功能需要数据库的支持, 数据库的加载肯定要在框架组件加载之前. 经过查阅和Debug发现, web.x ...

  4. 洛谷 [P2761] 软件补丁问题

    并不是网络流 状压+SPFA 通过题目中的描述及数据范围可知,我们状压当前的漏洞,以每个二进制位表示是否有这个漏洞,并以状压的结果为顶点,以补丁的时间为边跑SPFA即可 #include <io ...

  5. SPOJ 1811 LCS [后缀自动机]

    题意: 求两个串的最大连续子串 一个串建SAM,另一个串在上面跑 注意如果走了Suffix Link,sum需要更新为t[u].val+1 Suffix Link有点像失配吧,当前状态s走不了了就到S ...

  6. Vue中，父组件向子组件传值

    1:在src/components/child/文件夹下,创建一个名为:child.vue的子组件 2:在父组件中,设置好需要传递的数据 3:在App.vue中引入并注册子组件 4:通过v-bind属 ...

  7. redux简明学习

    前面的话 这几天被redux折腾的够呛,看了很多视频,也看了很多资料.很多时候,感觉好像顿悟了,但实际上只是理解了其中的一个小概念而已.真正去做项目的时候,还是会卡壳.可能是学CSS和Javascri ...

  8. [代码]JS原生Ajax,GET和POST

    javascript/js的ajax的GET请求: <script type="text/javascript"> /* 创建 XMLHttpRequest 对象 */ ...

  9. 【linux之用户，密码，组管理】

    一.用户及密码 用户账户 超级用户:UID=0 root 普通用户:UID!=0 系统用户: 0<UID<500 为了维持系统的某些功能或者实现某些服务 不能完成登录时候的身份验证 普通用 ...

  10. ajax常用操作

    load的方法的使用(现在已不常用) <!doctype html><html lang="en"><head> <meta charse ...