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. canvas将图片转为base64

    最简例子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta ...

  2. python--关于赋值与深浅拷贝的认识

    作为一个自学python的小白,平时用到深浅拷贝的机会很少,因此对其也是一知半解.但是,作为一个立志成为后端工程狮的男人,眼里揉不了沙子,于是专门花时间补了补课,在此记录一下学习心得.    在讲深浅 ...

  3. 使用py2exe发布windows平台Python

    一.简介 py2exe是一个将python脚本转换成windows上的可独立执行的可执行程序(*.exe)的工具,这样,你就可以不用装python而在windows系统上运行这个可执行程序.py2ex ...

  4. ZOJ [P2314] 无源汇点有上下界模版

    对于有上下界的网络流来说,我们可以分离出必要弧,然后将必要弧切开,两端分别连接源点和汇点,原图有可行解充要于源点或汇点满流. 这样求下来,只能求出可行流 #include <iostream&g ...

  5. EntityFramework 实践 Overview

    使用EntityFramework,是微软出的一个轻量级ORM框架,对于做一些小型的项目非常方便,几乎是零配置,以及对linq的支持,所以非常的易于使用,虽然已经使用EntityFramework很久 ...

  6. 用js脚本一键下载网页所有图片

    年前这两天稍微闲一点了,琢磨了一点js脚本,功能是把当前网页页面上的所有图片一次性保存到本地,免得每次都要对图片右键保存. 测试环境:Chrome开发者模式下(启动Chrome,按F12即可) 测试网 ...

  7. PHPUnit 手册

    PHPUnit 手册 Sebastian Bergmann 版权 © 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015 ...

  8. Java经典编程题50道之三十七

    有n个人围成一圈,顺序排号.从第一个人开始报数(从1到3报数),凡报到3的人退出圈子,问最后留下的是原来第几号的那位. public class Example37 { public static v ...

  9. 菜鸟之旅——.NET垃圾回收机制

    .NET的垃圾回收机制是一个非常强大的功能,尽管我们很少主动使用,但它一直在默默的在后台运行,我们仍需要意识到它的存在,了解它,做出更高效的.NET应用程序:下面我分享一下我对于垃圾回收机制(GC)的 ...

  10. Servlet中文乱码问题解决办法

    首先对于源jsp网站和servlet里面的字符集要一样,一般支持中文的字符集为UTF-8最好采用这个字符集(除此之外还有gb2312); 对于源jsp文件的代码中需要设置 设置你的page里面的字符集 ...