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. 《收藏》对servlet原理讲解特别详细

    转载:http://blog.csdn.net/javaloveiphone/article/details/8154791 内容: 一.先从servlet容器说起:大家最为熟悉的servlet容器就 ...

  2. ABP官方文档翻译 9.1 EntityFramework集成

    EntityFramework集成 Nuget包 DbContext 仓储 默认仓储 自定义仓储 应用特定的基础仓储类 自定义仓储示例 仓储最佳实践 事务管理 数据存储 ABP可以使用ORM框架,它内 ...

  3. bzoj 3864: Hero meet devil [dp套dp]

    3864: Hero meet devil 题意: 给你一个只由AGCT组成的字符串S (|S| ≤ 15),对于每个0 ≤ .. ≤ |S|,问 有多少个只由AGCT组成的长度为m(1 ≤ m ≤ ...

  4. 利用Needleman–Wunsch算法进行DNA序列全局比对

    生物信息学原理作业第二弹:利用Needleman–Wunsch算法进行DNA序列全局比对. 具体原理:https://en.wikipedia.org/wiki/Needleman%E2%80%93W ...

  5. putty，xshell以及密钥认证：linux学习第二篇

    1.    Putty下载 官网:https://www.chiark.greenend.org 下载putty的zip包 2.    Putty使用 2000为可查看的文件行数,建议设置为2000 ...

  6. [Python Study Notes] python面试题总结

    python语法以及其他基础部分 可变与不可变类型: 浅拷贝与深拷贝的实现方式.区别:deepcopy如果你来设计,如何实现: __new__() 与 __init__()的区别: 你知道几种设计模式 ...

  7. 七、Selenium与phantomJS----------动态页面模拟点击、网站模拟登录

    每天一个小实例1(动态页面模拟点击,并爬取你想搜索的职位信息) from selenium import webdriver from bs4 import BeautifulSoup # 调用环境变 ...

  8. canvas常用api

    1. 在canvas标签中给出长宽(不带单位):<canvas width="600" height="600"></canvas> 或 ...

  9. 配置Nginx代理服务器

    nginx另一个使用的比较多的情况是作为代理服务器,代理服务器接收请求,然后把请求传递到代理服务器,nginx最后会提取代理服务器的回复,并把这些回复发送给客户端.我们将配置一个基本的代理服务器,图片 ...

  10. C预处理器和C库

    #define #include #undef #ifdef #else #endif #if #elif #else #endif 预处理宏: p463 _ _fun_ _是预定义标识符(函数作用域 ...