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. 浅谈python中的闭包函数

    闭包函数初探 通常我们定义函数都是这样定义的 def foo(): pass 其实在函数式编程中,函数里面还可以嵌套函数,如下面这样 def foo(): print("hello worl ...

  2. iOS-RAC从新手开始

    什么是RAC? 其实RAC就是一个简化代码的第三方库ReactiveCocoa,直接用Cocoapods添加到项目里就可以, podfile 文件添加 pod 'ReactiveCocoa',然后终端 ...

  3. Maven pom.xml简单归结

    Maven pom.xml文件解释 请确保有相关的maven知识,包括Maven安装.Maven settings.xml解读.本文对POM的一些属性作一些摘录,详细的配置可查看此篇转载文章" ...

  4. hdu 5730 Shell Necklace [分治fft | 多项式求逆]

    hdu 5730 Shell Necklace 题意:求递推式\(f_n = \sum_{i=1}^n a_i f_{n-i}\),模313 多么优秀的模板题 可以用分治fft,也可以多项式求逆 分治 ...

  5. for in 在数组和json中

    数组中也有for--in,相较于对象中的用法是有区别的:数组中 var arr = ['曹操','曹植','曹丕'] for(i in arr){ console.log(i) //0 1 2 con ...

  6. vscode php跳转

    最近在写一个php项目,最后选定使用vscode编辑器,然后研究了一下断点调试.格式代码.点击跳转 以下是配置步骤,记录一下 1.代码格式化及跳转  1.前提条件:安装7.0以上版本php,     ...

  7. 零基础2018如何系统地学习python？

    首先告诉你的是,零基础学习开始系统学习Python肯定难,Python的专业程度本身就不简单,学习这事本来就是一件非常煎熬的事情,人都不愿意学习,可是没办法,为了生存掌握一个技能,你必须学,如果你认真 ...

  8. 针对Eclipse的maven Missing artifact com.microsoft.sqlserver:slqjdbc4:jar:4.0

    maven 中添加sqlserver 出错,报错内容 maven Missing artifact com.microsoft.sqlserver 解决方法这里先下载好jar包 ,然后maven命令执 ...

  9. Math Jax开源数学编辑器的使用

    首先,这是一个开源免费,同时也可以支持扩展的软件. 使用API文档: 中文网站(http://mathjax-chinese-doc.readthedocs.io/en/latest/index.ht ...

  10. apache服务器主域名跳转www域名

    为集中网站权重,有时候我们需要把www域名跳转到主域名,或者主域名跳转到www域名. apache服务器如何实现主域名跳转www域名: 打开网站根目录下.htaccess文件,没有的话新建一个上传至网 ...