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. MonogoDB 练习一

    1.解析文件,仅处理 FIELDS 字典中作为键的字段,并返回清理后的值字典列表 需求: 1.根据 FIELDS 字典中的映射更改字典的键 2.删掉"rdf-schema#label&quo ...

  2. 自己收集的工作js库---2018-02-07

    今年工作进度到这里结束,整理一下今年收集的自用js库,后期会更新,代码已贴github=>https://github.com/lpg-kobe/personal-github /** * @p ...

  3. 在eclipse的配置文件里指定jdk路径

    在eclipse的配置文件里指定jdk路径,只需在eclipse的配置文件里增加-vm参数即可. 打开eclipse目录下的eclipse.ini配置文件,增加-vm配置,需要注意的是该参数要加在-v ...

  4. UOJ Round #1 [数论 | DP 排列]

    UOJ Round #1 难度很良心啊! 做出了前两题,第三题看到仙人掌就吓哭了. [UR #1]缩进优化 就是求 \[ \sum_{i=1}^n a_i - (x-1)\sum_{i=1}^n\lf ...

  5. I/O多路转接模型

    body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...

  6. Go基础之--反射

    反射:可以在运行时动态获取变量的相关信息 反射需要导入reflect 反射中重要函数的演示 反射有几下几个重要的函数:reflect.TypeOf :获取变量的类型,返回reflect.Type类型r ...

  7. 树莓派小车（三）Python控制小车

    正文之前 由于最近忙于复习赶考,所以暂时没有拿起树莓派小车,直到昨天,终于空出时间来把代码整理一下来和大家分享. 正文 在树莓派小车系列之二中,讲到了树莓派的引脚定义方式有两种: PHYSICAL N ...

  8. strcpy和strcat易忽略点

    首先来看一段C程序: #include <stdio.h> #include <string.h> #include <stdlib.h> void GetMem( ...

  9. Windows下为Lua脚本进行加密处理

    缘由 想对Lua脚本进行安全性处理,可惜一直没有想到很好的解决方案,考虑过用原生Lua将脚本编译成二进制代码,也考虑过用zlib将文件进行加密压缩处理,但是感觉都不是最佳方案,今天忽然想到有个东西叫L ...

  10. SqlSugar ORM 入门到精通【一】入门篇

    背景 SqlSugar是一款国产ORM,除了拥有媲美原生的性能 另外还有满足各种需求的功能,简单好用一分钟就能够轻松上手. 2.x版本正式在自已公司内部项目使用 3.x版本得到了更多公司的喜欢不过也会 ...