<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Highcharts Demo</title>

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/highcharts.js"></script>

<script type="text/javascript" src="js/excanvas.compiled.js"></script>

<script type="text/javascript">

var chart;

$(document).ready(function() {

	chart = new Highcharts.Chart({

		chart: {

			renderTo: 'container',//设置显示图表的容器

			type: 'line',//设置图表样式，可以为line,spline, scatter, splinearea bar,pie,area,column

//			defaultSeriesType: 'column', //图表的默认样式

//			margin:[21, 23, 24, 54],//整个图表的位置(上下左右的空隙)

			marginRight: 200,//右边间距

			marginBottom: 25//底部间距/空隙

//	    	inverted: false,//可选，控制显示方式，默认上下正向显示

//          shadow:true,//外框阴影

//          backgroundColor:"#FFF",

//          animation:true,

//          borderColor:"#888",

//          borderRadius:5,

//          borderWidth:1,

//          ignoreHiddenSeries:true,

//          reflow:true,

//          plotBorderWidth:1,

//          alignTicks:true

		},

		labels:{//在报表上显示的一些文本

            items:[{

                html:'本图表数据有误，仅用于说明相应的属性',

                style:{left:'100px',top:'60px'}

            }, {

                html:'http://www.highcharts.com/demo',

                style:{left:'100px',top:'100px'}

            }]

        },

        credits:{//右下角的文本

            enabled: true,

            position: {//位置设置

                align: 'right',

                x: -10,

                y: -10

            },

            href: "http://www.highcharts.com",//点击文本时的链接

            style: {

                color:'blue'

            },

            text: "Highcharts Demo"//显示的内容

        },

//        plotOptions:{//绘图线条控制

//            spline:{

//                allowPointSelect :true,//是否允许选中点

//                animation:true,//是否在显示图表的时候使用动画

//                cursor:'pointer',//鼠标移到图表上时鼠标的样式

//                dataLabels:{

//                   enabled :true,//是否在点的旁边显示数据

//                    rotation:0

//                },

//                enableMouseTracking:true,//鼠标移到图表上时是否显示提示框

//                events:{//监听点的鼠标事件

//                    click: function() {

//                    }

//                },

//                marker:{

//                    enabled:true,//是否显示点

//                   radius:3,//点的半径

//                      fillColor:"#888"

//                    lineColor:"#000"

//                    symbol: 'url(http://highcharts.com/demo/gfx/sun.png)',//设置点用图片来显示

//                    states:{

//                        hover:{

//                            enabled:true//鼠标放上去点是否放大

//                                                    },

//                        select:{

//                            enabled:false//控制鼠标选中点时候的状态

//                        }

//                    }

//               },

//                states:{

//                    hover:{

//                        enabled:true,//鼠标放上去线的状态控制

//                        lineWidth:3

//                    }

//                },

//                stickyTracking:true,//跟踪

//                visible:true,

//                lineWidth:2//线条粗细

//                pointStart:100,

//            }

//        },

		title: {

			text: 'Monthly Average Temperature',//标题

			x: -20 //center设置标题的位置

		},

		subtitle: {

			text: 'Source: WorldClimate.com',//副标题

			x: -20//副标题位置

		},

		xAxis: {//横轴的数据

			categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',

				'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

//			lineWidth:1,//纵轴一直为空所对应的轴，即X轴

//			plotLines: [{//一条竖线

//	             color: '#FF0000',

//	             width: 2,

//	             value: 5.5

//	         }]

//			labels: {//设置横轴坐标的显示样式

//				rotation: -45,//倾斜度

//				align: 'right',

//				step:1,//刻度间隔

//				style: {

//					 font: 'normal 13px Verdana, sans-serif'

//					 color: 'white'

//				}

//			}

		},

		yAxis: {

//			tickInterval: 200,	//自定义刻度

//			max:1000,//纵轴的最大值

//			min: 0,//纵轴的最小值

			title: {//纵轴标题

				text: '百分数'

			},

			labels : {

			    formatter : function() {//设置纵坐标值的样式

			     return this.value + '%';

			    }

			   },

			plotLines: [{

				value: 0,

				width: 1,

				color: '#808080'

			}]

		},

		tooltip: {//鼠标移到图形上时显示的提示框

			formatter: function() {

					return '<b>'+ this.series.name +'</b><br/>'+

					this.x +': '+ this.y +'°C';

			}

//			crosshairs:[{//控制十字线

//	            width:1,

//	            color:"#CCC",

//	            dashStyle:"longdash"

//	        }

		},

		legend: {//方框所在的位置(不知道怎么表达)

			layout: 'vertical',

			align: 'right',

			verticalAlign: 'top',

			x: -10,

			y: 100,

			borderWidth: 0

		},

		series: [{//以下为纵轴数据

			name: 'Tokyo',

			data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]

		}, {

			name: 'New York',

			data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]

		}, {

			name: 'Berlin',

			data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]

		}, {

			name: 'London',

			data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]

		}]

	});

});

</script>

</head>

<body>

<div id="container" ></div>

</body>

</html><pre name="code" class="html"><pre name="code" class="html">//				</pre>

<pre></pre>

<pre></pre>

<br>

<br>

<pre></pre>

<pre></pre>

</pre>

highcharts相关属性的更多相关文章

  1. Highcharts一些属性

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  2. 随手记一次用C#正则表达式获取下拉菜单html标签<select>以及相关属性值

    随手记一次用C#正则表达式获取下拉菜单html标签<select>以及相关属性值 1:有如下html: .................. <select id="aaa ...

  3. css中的大小、定位、轮廓相关属性

    css中的大小.定位.轮廓相关属性 1.通过height.width属性控制组件大小 height:高度,可以设置任何有效的距离值: width:宽度,可以设置任何有效的属性值: max-height ...

  4. css中的背景、边框、补丁相关属性

    css中的背景.边框.补丁相关属性 关于背景涉及到背景颜色与背景图片 背景颜色background-color即可设定: 背景图片background-image即可设定: 但是背景图片还涉及到其他的 ...

  5. Activity Intent Flags及Task相关属性

    转自http://www.cnblogs.com/lwbqqyumidi/p/3775479.html 今天我们来讲一下Activity的task相关内容. 上次我们讲到Activity的四种启动模式 ...

  6. AndroidManifest.xml中<activity></activity>相关属性说明

    虽说,从事android开发有一定时间了,对于Activity大家也都不陌生,但是具体的对于Activity中相关属性的含义有必要做一个系统的总结: intent-filteraction: 来指定响 ...

  7. css中的字体及文本相关属性

    css中的字体及文本相关属性 1.字体相关属性 字体主要可以设置color.font-family.font-size.font-size-adjust.font-stretch.font-style ...

  8. Android总结篇系列：Activity Intent Flags及Task相关属性

    同上文一样,本文主要引用自网上现有博文,并加上一些自己的理解,在此感谢原作者. 原文地址: http://blog.csdn.net/liuhe688/article/details/6761337 ...

  9. IOS开发UI基础UITextView相关属性

    UITextView相关属性 •    text: 设置textView中文本_textView.text = @"Now is the time for all good develope ...

随机推荐

  1. Python学习路程day11

    SqlAlchemy ORM SQLAlchemy是Python编程语言下的一款ORM框架,该框架建立在数据库API之上,使用关系对象映射进行数据库操作,简言之便是:将对象转换成SQL,然后使用数据A ...

  2. 2-legged oauth & 3-legged oauth

    3-legged oauth resource owner, client, server. resource owner 给client访问权限去访问resource owner在server上的r ...

  3. Html5简单存储localStorage和sessionStorage

    localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 1.localStorage : localStorage 没有时间限制的 ...

  4. Java笔记1-Java相关概念和如何实现跨平台

    一.Java相关概念 1.Java语言的核心特点跨平台面向对象 2.Java的历史版本JDK1.0,JDK1.1,JDK1.2....JDK5.0,JDK6.0,JDK7.0,JDK8.0 注意:JD ...

  5. 【 D3.js 入门系列 --- 5 】 如何添加坐标轴

    第3节中做了一个图标,但没有为它添加一个相应的坐标轴,这样不知道每一个柱形到底有多长.这一节做一个坐标轴. D3中的坐标轴都是以 svg 图的形式出现的,这也是为什么在第3节中要使用 svg 的方法做 ...

  6. Linux下获得系统时间的C语言实现

    Linux下获得系统时间的C语言的实现方法 #include<time.h> //C语言的头文件#include<stdio.h> //C语言的I/O   int main() ...

  7. 【我所理解的Cocos2d-x】第六章 精灵Sprite 读书笔记

    简介: 精灵是2D游戏里最重要的元素.游戏场景中大部分可见的元素都直接或间接地与精灵相关. 在Cococs2d-xz中,精灵使用Sprite表示,它将一张纹理的一部分或者全部的矩形区域绘制在屏幕上. ...

  8. centos7+nginx 1.9.0+php-fpm+phpstorm+xdebug+vmware开发环境搭建

    1.php-fpm yum install php-fpm 默认配置在本地9000端口监听 service php-fpm restart启动 2.nginx 1.9.0 需先安装gcc zlib o ...

  9. linux 常用的酷炫命令

    1 命令行日常系快捷键 如下的快捷方式非常有用,能够极大的提升你的工作效率: CTRL + U -剪切光标前的内容 CTRL + K -剪切光标至行末的内容 CTRL + Y -粘贴 CTRL + E ...

  10. 再次理解javascript中的事件

    一.事件流的概念 + 事件流描述的是从页面中接收事件的顺序. 二.事件捕获和事件冒泡 +    事件冒泡接收事件的顺序: