<%@ 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. SQL.WITH AS.公用表表达式（CTE）

    一．WITH AS的含义    WITH AS短语,也叫做子查询部分(subquery factoring),可以让你做很多事情,定义一个SQL片断,该SQL片断会被整个SQL语句所用到.有的时候,是 ...

  2. Ubuntu Command-Line: Enable Unlimited Scrolling in the Terminal

    At times when using the terminal, the output from a command can be so long, you simply can’t scroll ...

  3. LPTHW 笨方法学python 19章

    本章节,我只是把所有的输出加上了自己的注释. #!/usr/bin/env python # -*- coding:utf-8 -*- def cheese_and_crakers(cheese_co ...

  4. ARM compiler No such file or directory

    /********************************************************************************* * ARM compiler No ...

  5. 数论 UVA 11076

    这道题目的意思简单易懂说的是给你n个数(可能有重复相同的数字),列出他们所有排列的情况,再逐位相加,求出和,例如:给你1,2,3,则排列的情况为<123>, <132>, &l ...

  6. kuangbin_SegTree E (HDU 1698)

    POJ服务器炸了 还没好呢 然后就只能跳掉一些题目了 这题也是成段更新模板题 本来lazy标记不是很明白 后来学长上课讲了一下就知道原理了 回去看看代码很容易就理解了 #include <cst ...

  7. ASP.NET同页面内【用户控件与父页面】以及【用户控件与用户控件】之间方法调用

    在用户控件中,获取父页面的方法 1:方法没有参数(userInfor()) string userInfor = Convert.ToString(this.Page.GetType().GetMet ...

  8. jquery选择器之表单选择\表单对象属性

    :input 匹配所有input标签 :text 匹配所有单行文本框 :password 匹配所有密码框 :radio  匹配所有单选扭 :checkbox 匹配所有复选框 :image 匹配所有图像 ...

  9. [转帖]DAS、NAS、SAN、iSCSI 存储方案概述

    目前服务器所使用的专业存储方案有DAS.NAS.SAN.iSCSI几种.存储根据服务器类型可以分为:封闭系统的存储和开放系统的存储:        (1)封闭系统主要指大型机.        (2)开 ...

  10. ecstore与淘宝sdk的autoload加载顺序问题

    ecstore使用spl_autoload_register实现类的自动加载,这个很大的方便我们不用每次都要手动的去include一些类和函数.不过这样会导致一些问题,比如说,有一些extension ...