highcharts 使用

highcharts 图形报表工具 最近公司开发需要用到报表  在网上查询了api 研究研究 更多请看:http://www.hcharts.cn/api/index.php#yAxis.title.text

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="highcharts.js"></script>

</head>

</style>
<body>
<!--div 显示滚动条-->
<!--
<div  style=" overflow: auto;  width: 1000px;
	border:1px solid red;"></div>
	-->
	<div id="container" style="width:999px;border:1px solid red;"></div>

</body>
</html>
$(function () {
	//#container 显示的div 内容id
	$('#container').highcharts({
		chart: {
			type: 'line'
		},
		//标题
		title: {
			text: 'highcharts',
			x:-20 //center 标题显示的位置 -20 居中
		},
		//副标题【可选项】
		subtitle: {
			text: 'charts',
			x: -20
		},
		//x轴
		xAxis: {
				categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
							'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
				/*
				tickColor:'red',//【坐标线颜色】
				tickInterval:1,//【坐标密度】
				tickLength:1,//【坐标长度】
				tickPixelInterval:1,
				gridLineWidth:0.1,//【网格粗细】
				gridLineColor:'red',//【网格颜色】
				gridLineDashStyle:'Solid',//【线条样式】
				lineColor:'red',*/
			//标签样式
			labels:{
				//是否启用xAxis轴【false则不启用】
				enabled:true,
				rotation:-25,//旋转
				//overflow:'auto',

				//设置字体样式
				style: {
					color: 'black',//字体颜色
					fontWeight: 'bold'//字体样式
				}
			}
		},
		//y轴
		yAxis: {
			title: {//y轴标题名称
				text: 'charts',
				style:{color:'blue'}
			},
			//标线属性
			plotLines: [{
				value: 0,
				width: 1,
				color: 'red'
			}],
			//gridLineWidth:0.1,//【网格粗细】
			//gridLineColor:'red',//【网格颜色】
			//gridLineDashStyle:'Solid',
			//tickInterval:0.5,//自定义刻密度
			min:2,//纵轴最小值
			labels:{
				/*formatter:function(){
					  if(this.value <=5) {
						return "低("+this.value+")";
					  }else if(this.value >10 && this.value <=30) {
						return "中("+this.value+")";
					  }else {
						return "低("+this.value+")";
					  }

				  },*/
				  //设置字体样式
				style: {
					color: 'black',//字体颜色
					fontWeight: 'bold'//字体样式
				}
			}
		},
		//数据提示框【可选项】
		tooltip: {//鼠标移上去显示的单位 不需要时把它删除即可注释也行
			valueSuffix: '°C',
			enabled:true, //设置不可用 启用设为true 即可
			backgroundColor:'red'
		},
		//图例【可选项】
		legend: {
			layout: 'vertical',//布局的方法 这儿跟下面的name:值对应着关心 在什么位置显示
			align: 'right',//对其方法
			verticalAlign: 'middle',//垂直对其居中
			borderWidth: 0 ,//边框宽度
			backgroundColor:'white',//背景颜色
			borderColor:'red',//边框颜色
			borderWidth:1,
			enabled:true,//是否可用
		},
		//图形选项
		plotOptions : {
			//线
			line : {
				//数据标签
				dataLabels : {
					enabled : true,//点上是否显示数字
					color:'red',//设置字体颜色
					style:{//设置样式
						fontWeight: 'bold'//字体样式
					}
				},
				marker : {
					enabled : true,//是否显示点
					radius : 4,//点的半径
					fillColor: '#FF9900',//点填充色
					//fillColor: 'red'//点填充色
					//lineWidth:2
				},
				cursor:'pointer',
				enableMouseTracking : false,
				stickyTracking : true,//跟踪
				visible : true,
				lineWidth : 1,//线宽
				lineColor:'#339933'//曲线图颜色
				//线条粗细
				//               pointStart:100,
			}
		},
		//版权信息【可选项】
		credits:{
		/*
		 禁用版权信息(默认为true 改为false即可禁用) 每一个
		 highcharts的右下角都有一个连接到highcharts.com的位置
		 也可以自己定义
		 */
		 enabled:true,
		 href:'http://lqi.iteye.com',
		 position: {//position 对象
			align: 'right',//对其位置
			x: -10,//x轴位置
			verticalAlign: 'bottom',//垂直对其底部
			y: -5 //y轴
		  },
		 style: {
				cursor: 'pointer',//鼠标放上去的放上
				color: 'red',//字体颜色
				fontSize: '10px'//字体大小
			},
		text:'blog.com'
		},
		//数据列
		series: [{
			//图例名称
			name: 'lvod',
			data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5,
				  23.3, 18.3, 13.9, 9.6]
		}, {
			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]
		}, {
			name: 'London',
			data: [3.2, 4.3, 5.1, 6.5, 21.9, 5.2, 7.0, 1.6,
				   4.2, 1.3, 2.6, 2.8]
		}]
	});
});		
时间: 2024-11-29 04:23:32

highcharts 使用的相关文章

Highcharts(一)

由来 2014年10月27日,我入职了我现在的这家公司,也是我第一家公司.到今天已经快3个月了,虽然这家公司规模不小,但是IT部的规模很小.到目前为止,整个部门17人,包括运维和开发.我们的项目组叫”MD”项目组,整个团队5个人.刚进公司简单的熟悉业务后,老大安排我负责系统服务端的接口.简单的说就是前端需要什么样的数据,我就给它提供相应的接口.就这样,写了1个多月的接口.由于系统需求,需要系统提供曲线图.老大让我到网上找一个控件学习一下,解决这个需求.这就是我学习Highcharts的由来. 介

大数据时代的图表可视化利器——highcharts,D3和百度的echarts

还记得阿里巴巴那个令人澎湃激情的双十一吗?还记得淘宝生动形象地把你的的消费历程一一地展示给你看吗?还记得那些酷炫拽的it报告图表吗?在这个大数据越来越盛行的年代,怎样去表达一些用户的关系,人物的关联,甚至是事情的发展,都让我们有更多的表达方式.其中最简单直接,形象明了的就是用图表说明问题了. 如果在以前,要实现各种图表,可能很多人会选择flash.但是flash成本较高,图表多的时候很耗性能.后来越来越多的纯js框架出现,让大家有了更多的选择.所以接下来我想推荐几个不错的图表js框架给大家用.

[转] angular2+highcharts+chart.js

这里是在ionic2下使用highchairs和chart.js的简单示例chartjs部分参考http://www.jianshu.com/p/bc18132da812 1.安装hightcharts npm install highcharts --save typings install dt~highcharts --global --save 2.编辑 html文件在html中添加一个div来显示图表 <ion-content class="about"> <

Highcharts简单入门

一.简介 Hicharts是一款支持移动端.图表类型丰富.方便快捷的 HTML5 交互性图表库,旨在让数据可视化更简单. 下面是一个简单的折线图,交互体验很棒. 二.如何使用? 1.官网下载压缩包 2.将js文件夹下复制到工程中 3.页面引入三个js文件 <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> <script type="text

HighCharts插件学习(二)

HighCharts属性 credits: {版权信息} data: {数据功能模块} drilldown: {钻取} exporting: {导出} labels: {标签} legend: {图例} loading: {加载} navigation: {导航} noData: {没有数据} pane: {-} plotOptions: {数据列配置} responsive: {响应式} series: [{数据列}] subtitle: {副标题} title: {标题} tooltip:

HighCharts学习笔记(一)

HighChars基本概述 Highcharts是一个纯js写成的插件库,很好的外观表现可以满足任何图标需求. 开始使用chart之前进行配置 全局配置: Highcharts.setOptions({ global: { useUTC: false }}); 主配置中参数含义: $("#container").highcharts({ accessibility:无障碍的设计{ describeSingleSeries: false enabled: true keyboardNav

HighCharts 详细使用及API文档说明

HighCharts 详细使用及API文档说明 2012-11-19 11:18 49574人阅读 评论(2) 收藏 举报  分类: HighCharts 一.HighCharts开发说明: HighCharts开发实际上配置HighCharts每个部分,比如配置标题(title),副标题(subtitle)等,其中每个部分又有更细的参数配置,比如标题下有对齐方式(align),标题文字(text)等.下图为整个图表的每个部分位置说明(请对照下面HighCharts整体结构) 二.HighCha

Highcharts 环境配置

Highcharts 环境配置 本章节我们将为大家介绍如何在网页中使用 Highcharts. Highcharts 依赖于 jQuery,所以在加载 Highcharts 前必须先加载 jQuery 库. 如果你对 jQuery 不熟悉,可以参阅本站的jQuery 教程. 安装 jQuery jQuery 安装可以使用以下两种方式: 1.访问 jquery.com 下载jQuery包. 2.使用本站静态资源库的jQuery资源: http://cdn.static.runoob.com/lib

在asp.net中如何自己编写highcharts图表导出到自己的服务器上来

1.准备工作:网上下载highcharts导出的关键dll.      1).Svg.dll:因为highcharts的格式其实就是一个xml,采用svg的方式画图:      2).itextsharp.dll:这样主要是用于处理和提取highcharts图表内的文字以及编码问题: 2.创建一个简单asp.net项目,并把上述两个程序集引入到项目中,OK.3.给出页面代码: <%@ Page Language="C#" AutoEventWireup="true&qu

基于MVC+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts

在我们做各种应用的时候,我们可能都会使用到图表统计,以前接触过一些不同的图表控件,在无意中发现了图表控件Highcharts,其强大的功能和丰富的互动效果,令人难以忘怀.本篇主要介绍在Web开发中使用图表控件Highcharts,以及对其进行统一汉化等操作,让我们的程序功能更加丰富,内容更加美观. 1.Highcharts基础介绍 Highcharts是一个非常流行,界面美观的纯Javascript图表库.它主要包括两个部分:Highcharts和Highstock.Highcharts可以为您