转载请注明出处:http://www.cnblogs.com/liubei/p/highchartsOption.html

HighCharts简介

Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。目前HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。

HighCharts界面美观,由于使用JavaScript编写,所以不需要像Flash和Java那样需要插件才可以运行,而且运行速度快。另外HighCharts还有很好的兼容性,能够完美支持当前大多数浏览器。

Highcharts 是一个用纯JavaScript编写的一个图表库, 
能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。目前HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。


HighCharts特点

1.兼容性:HighCharts采用纯JavaScript编写,兼容当今大部分的浏览器,包括Safari、IE(包括IE6)和火狐等等;
2.图表类型众多:HighCharts现在支持多种图表类型,包括曲线图、区域图、柱状图、饼状图、散状点图和综合图表等等,可以满足各种需求。
3.不受语言约束:HighCharts可以在大多数的WEB开发中使用,并且对个人用户免费,支持ASP,PHP,JAVA,.NET等多种语言中使用。
4.提示功能:HighCharts生成的图表中,可以设置在数据点上显示提示效果,即将鼠标移动到某个数据点上,可以显示该点的详细数据,并且可以对显示效果进行设置。
5.放大功能:HighCharts可以大量数据集中显示,并且可以放大某一部分的图形,将图表的精度增大,进行详细的显示,可以选择横向或者纵向放大。
6.时间轴:可以精确到毫秒
 

它主要包括两个部分: Highcharts 和 Highstock。

Highcharts 可以为您的网站或 Web 应用程序提供直观,互动式的图表。目前支持线, 样条, 面积,areaspline,柱形图,条形图,饼图和散点图类型。

Highstock 可以为您方便地建立股票或一般的时间轴图表。它包括先进的导航选项,   预设的日 期范围,日期选择器,滚动和平移等等。

详细参数:

支持浏览器列表:

类别 支持版本
Internet Explorer 6.0 +
Firefox 2.0 +
Chrome 1.0 +
Safari 4.0 +
Opera 9.0 +
iOS (Safari) 3.0 +
Android Browser 2.0 + *)

Highcharts是js框架jQuery,Mootools,Prototype的扩展。

支持版本

jQuery Mootools Prototype
1.8.2 1.4.5 1.7
1.7.2 1.3.2  
1.6.2 1.2.5  
1.5.2    
1.4.4    
1.3.2    
 
因为不同浏览器使用不同的渲染技术,新的浏览器大多支持SVG,老版本的IE就不支持,highcharts使用vml来渲染支持情况见下表:
 
浏览器版本 渲染技术 渲染效果
Internet Explorer 9 SVG Excellent
Internet Explorer 8 VML Ok
Internet Explorer 7 VML Slow
Internet Explorer 6 VML Slow
Firefox SVG Excellent
Chrome SVG Excellent
Safari SVG Excellent
Opera SVG Excellent
iOS Safari SVG Ok
Android 3+ SVG Ok
Android 2.x Canvas Slow

Chart:图表区配置

Chart图表区选项用于设置图表区相关属性。

参数 描述 默认值
backgroundColor 设置图表区背景色 #FFFFFF
borderWidth 设置图表边框宽度 0
borderRadius 设置图表边框圆角角度 5
renderTo 图表放置的容器,一般在html中放置一个DIV,获取DIV的id属性值 null
defaultSeriesType 默认图表类型line, spline, area, areaspline, column, bar, pie , scatter 0
width 图表宽度,默认根据图表容器自适应宽度 null
height 图表高度,默认根据图表容器自适应高度 null
margin 设置图表与其他元素之间的间距,数组,如[0,0,0,0] [null]
plotBackgroundColor 主图表区背景色,即X轴与Y轴围成的区域的背景色 null
plotBorderColor 主图表区边框的颜色,即X轴与Y轴围成的区域的边框颜色 null
plotBorderWidth 主图表区边框的宽度 0
shadow 是否设置阴影,需要设置背景色backgroundColor。 false
reflow 是否自使用图表区域高度和宽度,如果没有设置width和height时,会自适应大小。 true
zoomType 拖动鼠标进行缩放,沿x轴或y轴进行缩放,可以设置为:'x','y','xy' ''
events 事件回调,支持addSeries方法,click方法,load方法,selection方法等的回调函数。  

Color:颜色选项

Color颜色选项用于设置图表的颜色方案。

参数 描述 默认值
color 用于展示图表,折线/柱状/饼状等图的颜色,数组形式。 array

Highcharts已经默认提供了多种颜色方案,当要显示的图形多于颜色种类时,多出的图形会自动从第一种颜色方案开始选取。自定义颜色方案的方法:


Highcharts.setOptions({
   colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655',
'#FFF263', '#6AF9C4']
});

Title:标题选项

Title标题选项用于设置图表的标题相关属性。

参数 描述 默认值
text 标题文本内容。 Chart title
align 水平对齐方式。 center
verticalAlign 垂直对齐方式。 top
margin 标题与副标题之间或者主图表区间的间距。 15
floating 是否浮动,如果为true,则标题可以偏离主图表区,可配合x,y属性使用。 false
style 设置CSS样式。 {color: '#3E576F',
fontSize: '16px'}

Subtitle:副标题选项

副标题提供的属性选项与标题title大致相同,可参照上述标题选项,值得一提的是副标题的text选项默认为'',即空的,所以默认情况下副标题不显示。

xAxis:X轴选项

X轴选项用于设置图表X轴相关属性。

参数 描述 默认值
categories 设置X轴分类名称,数组,例如:categories: ['Apples', 'Bananas', 'Oranges'] []
title X轴名称,支持text、enabled、align、rotation、style等属性  
labels 设置X轴各分类名称的样式style,格式formatter,角度rotation等。 array
max X轴最大值(categories为空时),如果为null,则最大值会根据X轴数据自动匹配一个最大值。 null
min X轴最小值(categories为空时),如果为null,则最小值会根据X轴数据自动匹配一个最小值。 array
gridLineColor 网格(竖线)颜色 #C0C0C0
gridLineWidth 网格(竖线)宽度 1
lineColor 基线颜色 #C0D0E0
lineWidth 基线宽度 0

yAxis:Y轴选项

Y轴选项与上述xAxis选项基本一致,请参照上表中的参数设置,不再单独列出。

Series:数据列选项

数据列选项用于设置图表中要展示的数据相关的属性。

参数 描述 默认值
data 显示在图表中的数据列,可以为数组或者JSON格式的数据。如:data:[0, 5, 3, 5],或
data: [{name: 'Point 1',y: 0}, {name: 'Point 2',y: 5}]
''
name 显示数据列的名称。 ''
type 数据列类型,支持 area, areaspline, bar, column, line, pie, scatter or spline line

plotOptions:数据点选项

plotOptions用于设置图表中的数据点相关属性。plotOptions根据各种图表类型,其属性设置略微有些差异,现将常用选项列出来。

参数 描述 默认值
enabled 是否在数据点上直接显示数据 false
allowPointSelect 是否允许使用鼠标选中数据点 false
formatter 回调函数,格式化数据显示内容 formatter: function() {return this.y;}

Tooltip:数据点提示框

Tooltip用于设置当鼠标滑向数据点时显示的提示框信息。

参数 描述 默认值
enabled 是否显示提示框 true
backgroundColor 设置提示框的背景色 rgba(255, 255, 255, .85)
borderColor 提示框边框颜色,默认自动匹配数据列的颜色 auto
borderRadius 提示框圆角度 5
shadow 是否显示提示框阴影 true
style 设置提示框内容样式,如字体颜色等 color:'#333'
formatter 回调函数,用于格式化输出提示框的显示内容。返回的内容支持html标签如:<b>, <strong>, <i>, <em>, <br/>, <span> 2

Legend:图例选项

legend用于设置图例相关属性。

参数 描述 默认值
layout 显示形式,支持水平horizontal和垂直vertical horizontal
align 对齐方式。 center
backgroundColor 图例背景色。 null
borderColor 图例边框颜色。 #909090
borderRadius 图例边框角度 5
enabled 是否显示图例 true
floating 是否可以浮动,配合x,y属性。 false
shadow 是否显示阴影 false
style 设置图例内容样式 ''

例子效果:

例子:

<!DOCTYPE HTML5>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="author" content="Web Layout:LiuBei;" />
<title>highcharts示例</title>
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" language="javascript" src="http://code.highcharts.com/modules/exporting.js"></script>
<style type="text/css">
.chart{width:400px;height:300px;float:left;}
</style>
</head>
<body>
<div id="divChart1" class="chart"></div>
<div id="divChart2" class="chart"></div>
<div id="divChart3" class="chart"></div>
<div id="divChart4" class="chart"></div>
<div id="divChart5" class="chart"></div>
<div id="divChart6" class="chart"></div>
<div id="divChart7" class="chart"></div>
<div id="divChart8" class="chart"></div>
<script type="text/javascript">
var chart = null;
$(function () {
//highcharts示例1
$('#divChart1').highcharts({
chart: {
plotBorderWidth: 1,
defaultSeriesType:"line"
},
colors: ['#058DC7', '#50B432'],
title: {
text:"highcharts示例"
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
credits: {
enabled: true //右下角显示LOGO
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
data: [23, 45.5, 78.4, 89.2, 100.0, 135.0, 76.6, 32.5, 22.4, 67.1, 60.6, 123]
}]
});
//highcharts示例2
$('#divChart2').highcharts({
chart: {
plotBorderWidth: 1,
defaultSeriesType:"column"
},
colors: ['#ED561B', '#DDDF00'],
title: {
text:"highcharts示例2"
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
credits: {
enabled: false //右下角不显示LOGO
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
data: [23, 45.5, 78.4, 89.2, 100.0, 135.0, 76.6, 32.5, 22.4, 67.1, 60.6, 123]
}]
});
//highcharts示例3
$('#divChart3').highcharts({
chart: {
plotBorderWidth: 1,
defaultSeriesType:"spline"
},
colors: ['#24CBE5', '#64E572'],
title: {
text:"highcharts示例3"
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
credits: {
enabled: false //右下角不显示LOGO
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
data: [23, 45.5, 78.4, 89.2, 100.0, 135.0, 76.6, 32.5, 22.4, 67.1, 60.6, 123]
}]
});
//highcharts示例4
$('#divChart4').highcharts({
chart: {
plotBorderWidth: 1,
defaultSeriesType:"area"
},
colors: ['#FF9655','#FFF263'],
title: {
text:"highcharts示例4"
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
credits: {
enabled: false //右下角不显示LOGO
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
data: [23, 45.5, 78.4, 89.2, 100.0, 135.0, 76.6, 32.5, 22.4, 67.1, 60.6, 123]
}]
});
//highcharts示例4
$('#divChart5').highcharts({
chart: {
plotBorderWidth: 1,
defaultSeriesType:"areaspline"
},
colors: ['#058DC7','#6AF9C4'],
title: {
text:"highcharts示例5"
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
credits: {
enabled: false //右下角不显示LOGO
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
data: [23, 45.5, 78.4, 89.2, 100.0, 135.0, 76.6, 32.5, 22.4, 67.1, 60.6, 123]
}]
});
//highcharts示例4
$('#divChart6').highcharts({
chart: {
plotBorderWidth: 1,
defaultSeriesType:"bar"
},
colors: ['#50B432','#DDDF00'],
title: {
text:"highcharts示例6"
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
credits: {
enabled: false //右下角不显示LOGO
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
data: [23, 45.5, 78.4, 89.2, 100.0, 135.0, 76.6, 32.5, 22.4, 67.1, 60.6, 123]
}]
});
//highcharts示例4
$('#divChart7').highcharts({
chart: {
plotBorderWidth: 1,
defaultSeriesType:"pie"
},
colors: [ '#ED561B', '#24CBE5'],
title: {
text:"highcharts示例7"
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
credits: {
enabled: false //右下角不显示LOGO
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
data: [23, 45.5, 78.4, 89.2, 100.0, 135.0, 76.6, 32.5, 22.4, 67.1, 60.6, 123]
}]
});
//highcharts示例4
$('#divChart8').highcharts({
chart: {
plotBorderWidth: 1,
defaultSeriesType:"scatter"
},
colors: ['#DDDF00', '#64E572'],
title: {
text:"highcharts示例8"
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
credits: {
enabled: false //右下角不显示LOGO
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
data: [23, 45.5, 78.4, 89.2, 100.0, 135.0, 76.6, 32.5, 22.4, 67.1, 60.6, 123]
}]
});
});
</script>
</body>
</html>

参考地址:http://rfyiamcool.blog.51cto.com/1030776/1221175

highcharts图表插件初探的更多相关文章

  1. HighCharts 图表插件 自定义绑定 时间轴数据

    HighCharts 图表插件 自定义绑定 时间轴数据,解决时间轴自动显示数据与实际绑定数据时间不对应问题! 可能要用到的源码片段:http://code.662p.com/list/14_1.htm ...

  2. jQuery HighchartsTableHTML表格转Highcharts图表插件

    版权申明jQuery HighchartsTable 由 PMSIpilot 创建,中文使用文档由Highcharts中文网发布本文由Theo.红烧鸡翅膀.Mr.Zhang 翻译整理,版权归Highc ...

  3. Highcharts图表插件的简单使用说明

    Highcharts图表控件是眼下使用最为广泛的图表控件.本文将从零開始逐步为你介绍Highcharts图表控件. 通过本文.你将学会怎样配置Highcharts以及动态生成Highchart图表. ...

  4. jquery图表插件morris.js参数详解和highcharts图表插件

    一.morris.js 优点:轻巧.简单好用 缺点:没highcharts功能多,常用的足以 网址:http://morrisjs.github.io/morris.js/ 核心代码 1.head调用 ...

  5. 图表插件——Highcharts插件的使用(一柱状图)

    1.下载Highcharts插件 官方下载网址:http://www.highcharts.com/download 2.引入需要的js文件 <script src="~/Script ...

  6. 图表插件Highcharts的动态化赋值,实现图表数据的动态化设置显示

    在很早之前就介绍过图表插件Highcharts的使用了,在2014年的随笔<基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts>,这里基本上都介绍 ...

  7. 纯JavaScrip图表插件——Highcharts

    简介 Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业用途使用.目前H ...

  8. highCharts图表应用-实现多种图表的显示

    在数据统计和分析业务中,有时需要在一个图表中将柱状图.饼状图.曲线图的都体现出来,即可以从柱状图中看出具体数据.又能从曲线图中看出变化趋势,还能从饼状图中看出各部分数据比重.highCharts可以轻 ...

  9. python 全栈开发,Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

    一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...

随机推荐

  1. c语言描述的链队列的基本操作

    #include<stdio.h> #include<stdlib.h> #define ok 0 #define error 1 //链队列特点在于不仅有链的头指针和尾指针, ...

  2. Object C学习笔记23-继承,重写,重载(转)

    前面的学习都一直在使用Object C对象,但是没有具体总结过Object C中的对象使用特性,这里简单总结一下. 一.  继承 在面向对象编程中,子类可以通过继承得到父类的可以继承的的属性和方法,在 ...

  3. Git工作流指南:Gitflow工作流

    git工作流 1.Git flow 核心分支:master,dev 可能还会有:功能分支,bug修复分支,预发布分支 2.github flow:只一个长期分支,就是master 第一步:根据需求,从 ...

  4. 【TOJ 3660】家庭关系(hash+并查集)

    描述 给定若干家庭成员之间的关系,判断2个人是否属于同一家庭,即2个人之间均可以通过这些关系直接或者间接联系. 输入 输入数据有多组,每组数据的第一行为一个正整数n(1<=n<=100), ...

  5. Python的核心数据类型

    ​ Python的核心数据类型有:数字,字符串,列表,字典,元组,文件等. 数字 ​ 数字类型有:整形int,浮点型float,复数complex,布尔型bool. 整形 ​ 整型数是不带有小数部分的 ...

  6. JavaScript--Dom操作元素的样式

    在前端开发中,有时候需要动态修改的网页元素的样式,这里将使用JS动态修改元素样式的方法做个小结: 网页结构: 按钮: 标签:input    类型:button     id:btn          ...

  7. ethereum(以太坊)(基础)--容易忽略的坑(一)

    pragma solidity ^0.4.0; contract base{ address public _owner=msg.sender; uint _a; string internal _b ...

  8. 3D Food Printing【3D食物打印】

    3D Food Printing There's new frontier in 3D printing that's begining to come into focus: food. 3D打印的 ...

  9. go学习笔记-流程控制(if/else,for/range)

    流程控制(if/else,for/range) if if条件判断语句的语法概括起来就是:如果满足条件就做某事,否则做另一件事. func testIf() { num := 10 if num &l ...

  10. 【POJ】1008 Maya Calendar

    参考:https://blog.csdn.net/u011392408/article/details/28866779 https://blog.csdn.net/qq_36424540/artic ...