HighCharts详细介绍
HighCharts中文网:http://www.hcharts.cn/
HighCharts官网:http://www.highcharts.com/download
1、HighCharts是网页报表工具,开发语言是Javascript
2、HighCharts是一个简单易用、美观、跨平台、跨浏览器的图表工具
3、HighCharts支持图表的类型有:曲线图、柱状图、饼状图、区域图、散点图、综合图的各种图表需求。
1、首先,HighCharts是基于Jquery框架开发的,所以需要在页面引入Jquery,具体代码是:
<script src="http://code.highcharts.com/highcharts.js"></script>
引入HighCharts js文件还可以是拷贝下载下来的Highcharts资源包中的js目录下的highcharts.js文件
3、如果你想使用导出功能,必须引入导出相关的js文件,该文件存在与/Highcharts-2.3.5/js/modules/目录下
<script src="http://code.highcharts.com/modules/exporting.js"></script>
HighCharts 标题和副标题——title subtitle
- <html>
- <head>
- <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- <script type="text/javascript" src="../jquery-1.4.4.js"></script>
- <script type="text/javascript">
- $(function () {
- var chart;
- $(document).ready(function() {
- chart = new Highcharts.Chart({
- //HighCharts中chart属性配置
- chart: {
- renderTo: 'container',//div 标签
- type: 'line',//图表类型
- /******************以下chart配置可选******************/
- backgroundColor:"#EAF7FF",//图表背景色
- borderWidth:5,//图表边框宽度
- borderRadius:15,//图表边框圆角角度
- plotBackgroundColor:"#6DBFBB",//主图表区背景颜色
- plotBorderColor:'red',//主图表边框颜色
- plotBorderWidth:2,//主图表边框宽度
- shadow:true,//是否设置阴影
- zoomType:'xy'//拖动鼠标放大图表的方向
- },
- credits : {
- //enable:true,默认就为true,可以不配置
- //如果想要去除版权(也就是不显示),只需要设置enable:false即可
- href:'http://www.52wulian.org',//链接地址
- position: { //文字的位置
- x:-30,
- y:-30
- },
- style:{ //文字的样式
- color:'red',
- fontWeight:'bold'
- },
- enabled:true,//不显示highCharts版权信息,不显示为false
- text:'我爱物联网' //文字
- },
- /******************
- **Colors-颜色属性为可选配置
- **通过配置配置colors,可以轻松的设置数据列的颜色
- 1、颜色代码可以是十六进制,也可以是英文单词,
- 还可以是RGB,如同css
- 2、默认是从第一个数据列起调用第一个颜色代码,
- 有多少个数据列调用相应数量的颜色
- 3、当数据列大于默认颜色数量时,重复从第一个
- 颜色看是调用
- ******************/
- colors:[
- '#000000',//黑
- '#FF0000',//红
- '#00FF00',//绿
- '#0000FF',//蓝
- '#FFFF00',//黄
- '#FF00FF',//紫
- '#FFFFFF',//紫
- ],
- exporting: {
- //enabled:true,默认为可用,当设置为false时,图表的打印及导出功能失效
- buttons:{ //配置按钮选项
- printButton:{ //配置打印按钮
- width:50,
- symbolSize:20,
- borderWidth:2,
- borderRadius:0,
- hoverBorderColor:'red',
- height:30,
- symbolX:25,
- symbolY:15,
- x:-200,
- y:20
- },
- exportButton:{ //配置导出按钮
- width:50,
- symbolSize:20,
- borderWidth:2,
- borderRadius:0,
- hoverBorderColor:'red',
- height:30,
- symbolX:25,
- symbolY:15,
- x:-150,
- y:20
- }
- },
- filename:'52wulian.org',//导出的文件名
- type:'image/png',//导出的文件类型
- width:800 //导出的文件宽度
- },
- labels:{
- items:[{
- //标签代码(html代码)
- html:'<p style="font-size:20">Copyright © 2012-2013 </p><a href="http://www.52wulian.org" style="font-size:20;text-decoration: underline;">我爱物联网</a>',
- style:{ //设置标签位置
- left:'100px',
- top:'50px'
- }
- }],
- style:{ //设置标签颜色
- color:'rgb(0,0,255)'
- }
- },
- xAxis: {
- categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
- 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
- },
- 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>
- <script src="../highcharts.js"></script>
- <script src="../exporting.js"></script>
- <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
- </body>
- </html>
From: http://hbiao68.iteye.com/blog/1835578
Highcharts使用指南
摘要
Highcharts图表控件是目前使用最为广泛的图表控件。本文将从零开始逐步为你介绍Highcharts图表控件。通过本文,你将学会如何配置Highcharts以及动态生成Highchart图表。
目录
- 前言(Preface)
- 安装(Installation)
- 如何设置参数(How to set up the options)
- 预处理参数(Preprocess the options)
- 活动图(Live charts)
一、前言(Preface)
Highcharts是一个非常流行,界面美观的纯Javascript图表库。它主要包括两个部分:Highcharts和Highstock。
Highcharts可以为您的网站或Web应用程序提供直观,互动式的图表。目前支持线,样条,面积,areaspline,柱形图,条形图,饼图和散点图类型。
Highstock可以为您方便地建立股票或一般的时间轴图表。它包括先进的导航选项,预设的日期范围,日期选择器,滚动和平移等等。
如果想要了解更多Highcharts的信息,可以参考官网:http://www.highcharts.com。
二、安装(Installation)
1.Highcharts沿用jQuery,MooTool以及Prototype等Javascript框架来处理基本的Javascript任务。因此,在使用Highcharts之前,需要在页面头部引用这些脚本文件。如果你使用jQuery作为基本框架,那么你需要在页面头部同时引用jQuery和Hightcharts两个文件。如下:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> <script src="/js/highcharts.js" type="text/javascript"></script>
Highcharts(Highstock)已经内置了jQuery适配器(adapter)(注:可能是jQuery框架最流行的缘故),但是并没有内置MooTool等其他javascript框架的适配器(adapter)。因此,当我们使用MooTool等其他JS框架时,需要单独引用适配器(adapter)脚本文件。如下:
<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js" type="text/javascript"></script> <script src="/js/adapters/mootools-adapter.js" type="text/javascript"></script> <script src="/js/highcharts.js" type="text/javascript"></script>
提示: 安装Highstock过程与上述相同,除了JavaScript文件名称是highstock.js而不是highcharts.js。
2.在您的网页头部的脚本标签,或在一个单独的js文件,添加JavaScript代码来初始化图表。renderTo参数用来设置图表渲染的位置,一般来说是一个具有ID的DIV元素(参考第3步)。
var chart1; // 全局变量 $(document).ready(function() { chart1 = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'bar' }, title: { text: 'Fruit Consumption' }, xAxis: { categories: ['Apples', 'Bananas', 'Oranges'] }, yAxis: { title: { text: 'Fruit eaten' } }, series: [{ name: 'Jane', data: [1, 0, 4] }, { name: 'John', data: [5, 7, 3] }] }); });
上述代码适用于使用jQuery作为基本框架的情况,$(document).ready()函数,表示在文档加载完成后进行相应处理。如果你使用MooTool等其他JS框架,需要使用相对应的代码来替代$(document).ready()函数。
如果你想生成HighStock图表,有一个单独的构造方法调用Highcharts.StockChart。在这些图表中,数据源是一个典型的JavaScript数组数据。其来源可以是一个单独的JavaScript文件,或者是通过Ajax调用远程服务器提供的数据。
var chart1; // 全局变量 $(document).ready(function() { chart1 = new Highcharts.StockChart({ chart: { renderTo: 'container' }, rangeSelector: { selected: 1 }, series: [{ name: 'USD to EUR', data: usdtoeur // 数组变量 }] }); });
3.在页面中添加一个DIV元素,作为放置Highcharts图表的容器。需要为其设置ID值,与第2步rendTo参数绑定。设置的宽度和高度将作为Highcharts图表的宽度和高度。
<div id="container" style="width: 100%; height: 400px"></div>
4.你可以通过Highcharts.setOptions方法为Highcharts图表设置一个全局的主题(可选的)。下载包含有四个预定义的主题,如果你需要使用从这些主题,只需在 highcharts.js 后引用这些文件。比如:
<script type="text/javascript" src="/js/themes/gray.js"></script>
三、如何设置参数(How to set up the options)
如果你想在同一个页面上使用一组参数,可以定义一个选项对象(options object)来设置选项。更多内容参考#4预处理选项(Preprocessing the options)。
四、预处理参数(Preprocess the options)
- 在上面的例子中,Highcharts options被定义为对象字面值(object literals)。通过这种方法来标记配置,我们可以的到一个清晰的,可读性强的,占用空间低的配置对象。下面这种复杂的代码对于C程序员来说可能比较熟悉:
// 不良的风格 var options = new Object(); options.chart = new Object(); options.chart.renderTo = 'container'; options.chart.type = 'bar'; options.series = new Array(); options.series[0] = new Object(); options.series[0].name = 'Jane'; options.series[0].data = new Array(1, 0, 4);
// 良好的风格 var options = { chart: { renderTo: 'container', defaultSeriesType: 'bar' }, series: [{ name: 'Jane', data: [1, 0, 4] }] };
- 在创建命名的对象后,我们可以通过.操作符来扩展其成员。假设我们已经定义一个对象(见良好的风格代码)。下面代码代码将添加另一个series。请记住options.series是一个数组,因此我们可以使用push方法。
options.series.push({ name: 'John', data: [3, 4, 2] })
- 另外一个可以排上用场的事实是,对于JavsScript对象来说,点符号(.)和方括号[]是等价的。所以,你可以通过名称来访问成员。这意味着:
options.renderTo
options['renderTo']
4.1 案例学习: preprocessing the data from CSV
(1)创建一个外部的仅包含数据的CSV文件(数据源)。从下面数据文件中,我们可以看到第一行列出了类别的名称(类似于字段名)。后继的行的第一个位置列出了series name(比如:第二行的'John'),随后的位置列出相关的值(value)。在实际开发过程中,我们经常使用PHP或者其他服务器端编程语言(C#,java等)来创建这个文件的内容。或者你会选择其他的标记格式,比较的常见的如XML或者JSON(JSON相对XML更加轻巧)。在这些情况下,jQuery可以解析出数据对象本身。
Categories,Apples,Pears,Oranges,Bananas John,8,4,6,5 Jane,3,4,2,3 Joe,86,76,79,77 Janet,3,16,13,15
(2)定义基本的初始的参数。注意到,我们为categorys和series对象创建了空数组(empty arrays),稍后我们可以为其添加数据。
var options = { chart: { renderTo: 'container', defaultSeriesType: 'column' }, title: { text: 'Fruit Consumption' }, xAxis: { categories: [] }, yAxis: { title: { text: 'Units' } }, series: [] };
(3)加载数据。我们通过jQuery的.get方法来获取数据文件.csv的内容。在success回调函数中,我们解析请求返回的字符串,并将结果添加到参数对象(options object)的categories和series成员对象中,最后创建图表。请注意,我们不能在Ajax callback外创建图表,因为我们要等待服务器返回的数据(当请求成功后,返回数据,该过程是异步的)。
$.get('data.csv', function(data) { // Split the lines var lines = data.split('\n'); // Iterate over the lines and add categories or series $.each(lines, function(lineNo, line) { var items = line.split(','); // header line containes categories if (lineNo == 0) { $.each(items, function(itemNo, item) { if (itemNo > 0) options.xAxis.categories.push(item); }); } // the rest of the lines contain data with their name in the first position else { var series = { data: [] }; $.each(items, function(itemNo, item) { if (itemNo == 0) { series.name = item; } else { series.data.push(parseFloat(item)); } }); options.series.push(series); } }); // Create the chart var chart = new Highcharts.Chart(options); });
4.2 加载XML数据
从XML文件加载数据与加载CSV文件类似。Highcharts不能处理预定义的XML数据(只能处理数组)。因此,整个过程由你来编写XML数据,并为它定义一个解析函数。相对于CSV文件来说,XML的最大缺点是,它增加了一些标记数据(这也是选择JSON的缘故)。使用XML的好处在于,至少对于小量的数据来说,你不必要手动解析返回的数据。你可以使用jQuery现有的DOM解析能力来访问XML数。你可以在data-from-xml.htm看到实例,数据包含在data.xml。
五、活动图(Live Charts)
尽管我们已经通过配置对象(configuration object)定义图表,然后选择性地预处理(optionally preprocessed),最后通过new Highcharts.Chart()初始化和渲染图表,我们仍然有机会通过API来改变图表。chart,axis,series以及point对象有许多方法,比如update,remove,addSeries,addPoints等等。完整的列表可以查看API参考(the API Reference)下方法和属性。
5.1 案例学习:a live connection to the server
下面的例子将展示怎样构建一个活动的图表(live chart)通过每一秒种从服务器检索的数据。首先,我们要建立自定义函数requestData,它开始在图表加载事件(load event)中调用,随后在Ajax回调函数success中调用。你可以在live-server.htm中看到结果。
1.建立服务器。在这个例子中,我们选择PHP作为服务器脚本语言返回包含时间(time)以及y值(y value)的javascript数组。下列为live-server-data.php文件的代码:
1 <?php 2 // Set the JSON header 3 header("Content-type: text/json"); 4 5 // The x value is the current JavaScript time, which is the Unix time multiplied by 1000. 6 $x = time() * 1000; 7 // The y value is a random number 8 $y = rand(0, 100); 9 10 // Create a PHP array and echo it as JSON 11 $ret = array($x, $y); 12 echo json_encode($ret); 13 ?>
2.定义全局变量。需要强调的是,这里必须定义chart全局变量,因为在document ready函数以及requestData函数均要访问。
1 var chart; // global
3.实现requestData函数。在这个例子中使用jQuery中$.ajax函数来处理ajax事务(你也可以用其他ajax框架来替代)。当数据从服务器成功返回后,通过addPoint方法添加点。
1 /** 2 * Request data from the server, add it to the graph and set a timeout to request again 3 */ 4 function requestData() { 5 $.ajax({ 6 url: 'live-server-data.php', 7 success: function(point) { 8 var series = chart.series[0], 9 shift = series.data.length > 20; // shift if the series is longer than 20 10 11 // add the point 12 chart.series[0].addPoint(point, true, shift); 13 14 // call it again after one second 15 setTimeout(requestData, 1000); 16 }, 17 cache: false 18 }); 19 }
4.创建图表。
1 $(document).ready(function() { 2 chart = new Highcharts.Chart({ 3 chart: { 4 renderTo: 'container', 5 defaultSeriesType: 'spline', 6 events: { 7 load: requestData 8 } 9 }, 10 title: { 11 text: 'Live random data' 12 }, 13 xAxis: { 14 type: 'datetime', 15 tickPixelInterval: 150, 16 maxZoom: 20 * 1000 17 }, 18 yAxis: { 19 minPadding: 0.2, 20 maxPadding: 0.2, 21 title: { 22 text: 'Value', 23 margin: 80 24 } 25 }, 26 series: [{ 27 name: 'Random data', 28 data: [] 29 }] 30 }); 31 });
From:http://www.cnblogs.com/liuhaorain/archive/2012/01/24/2311352.html
HighCharts 详细使用及API文档说明
一、HighCharts开发说明:
HighCharts开发实际上配置HighCharts每个部分,比如配置标题(title),副标题(subtitle)等,其中每个部分又有更细的参数配置,比如标题下有对齐方式(align),标题文字(text)等。下图为整个图表的每个部分位置说明(请对照下面HighCharts整体结构)
二、HighCharts整体结构:
通过查看API文档我们知道HighCharts结构如下:(API文档在文章后面提供下载)
var chart = new Highcharts.Chart({
chart: {…} // 配置chart图表区
colors: [{...}] // 配置主体显示颜色(多个线条和柱体的颜色顺序的)
credits: {…} // 配置右下角版权链接
exporting: {…} // 配置导出及打印
global: {…} // Highcharts.SetOptions方法调用
labels: {…} // HTML标签,可以放置在绘图的任何位置
lang: {…} // 语言对象属性配置
legend: {…} // 配置图例选项
loading: {…} // 配置图表加载选项
navigation: {…} // 配置导出按钮属性
pane: {…} // 仅适用于极性图表和角仪表
plotOptions: {…} // 配置数据点选项
series: [{...}] // 配置数据列选项
subtitle: {…} // 配置副标题
title: {…} // 配置标题
tooltip: {…} // 配置数据点提示框
xAxis: {…} // 配置x轴选项
yAxis: {…} // 配置y轴选项
})
上面红色部分是图标完整性及美观必须自己配置的选项,其他选项无特殊需要默认就行,也就是不用配置,所以开发HighCharts是不是很简单,只需要配置简单的几个选项就行,下面详细讲解每个选项的配置。
三、HighCharts每部分详细配置:
1、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方法等的回调函数 |
、
2、colors :数据列颜色选项
主要是数据列颜色设置,比如多条线条中的每个线条颜色。
参数 | 描述 | 默认 |
color | 用于展示图表,折线/柱状/饼状等图的颜色,数组形式。 |
一组html颜色代码 |
colors: [ '#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4' ] |
说明:1、颜色代码为html标准,可通过DW等复制想要的代码 2、默认是从第一个数据列起调用第一个颜色代码,有多少个数 据列调用相应数量的颜色 3、当数据列大于默认颜色数量时,重复从第一个颜色看是调用 |
3、credits :版权链接选项
参数 | 描述 | 默认值 |
enabled | 是否显示版权及链接,布尔型,默认为显示 | true |
position | 位置。可用align调整对齐方式,x,y设置距离。 |
position: { align: ‘right’,x: -10, verticalAlign: ‘bottom’,y: -5 } |
href | 链接地址。String型,默认是highCharts官网 | www.highcharts.com |
style | 名片CSS模式 |
itemStyle : { cursor: ‘pointer’,color: ‘#909090′, fontSize: ’10px’ } |
text | 显示名字。 | highcharts.com |
4、exporting :导出及打印选项
参数 | 描述 | 默认值 |
buttons | 打印和导出按钮设置。其中两个按钮中又有很多样式等设置,如有需要可详细查看API文档 | 默认按钮样式 |
enableImages | 在导出的图片中添加logo水印。布尔型,默认是false | false |
enabled | 是否显示按钮(也就是启用打印导出功能),布尔型,默认显示 | true |
filename | 导出图片文件名,String型 | chart |
type | 导出图片的格式,有jpg和png可选,String型 | jpg/png |
url | 转换图片的服务器url,默认是用highcharts服务器 | http://export.highcharts.com |
width | 图片大小,数字型 | 800 |
5、global :Highcharts.SetOptions方法调用
全局选项,并不适用于每一个图表。这些选项,如lang选项,必须设置使用Highcharts.setOptions方法。一般用不到,详情请查看API文档。
6、labels :HTML标签(可放置在图表的任意地方)
参数 | 描述 | 默认值 |
items | 包含两个选项html和style,分别代表html语句及样式 |
iteml :{
html : “”, style { } |
style | css样式 |
style:{ color : ‘#3E576F’} |
7、lang :语言配置选项,主要配置符号、导出时显示的语句、时间显示语言等。和上面的global参数有关,即调用Highcharts.SetOptions方法。下表列举常用的选项注意:lang选项其实就是配置一些显示语言,API中都有详细说明。
参数 | 描述 | 默认值 |
decimalPoint | 小数点 | . |
downloadJPEG | 导出显示的文字,下面还有downloadPDF等,都一样 | Download JPEG image等 |
months | 月份,字符串数组形式 |
['January' 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] |
numericSymbols | 数值单位,比如1000为1k | ['k', 'M', 'G', 'T', 'P', 'E'] |
8、legend :图例选项,即数据类标示。
参数 | 描述 | 默认值 |
layout | 显示形式,支持水平horizontal和垂直vertical | horizontal |
align | 对齐方式 | center |
backgroundColor | 背景颜色 | nulll |
borderColor | 图例边框颜色 | #909090 |
borderRadius | 图例边框角度 | 5 |
enabled | 是否显示图例 | true |
floating | 是否可以浮动,配合x,y属性 | false |
shadow | 是否显示阴影 | false |
style | 图例样式 | 详见API文档 |
9、loading: 图表加载选项
参数 | 描述 | 默认值 |
hideDuration | 淡出效果持续时间,以毫秒为单位 | 100 |
labelStyle | 标签样式,css形式 | 详见API文档 |
showDuration | 淡入效果持续时间,以毫秒为单位 | 100 |
style | 图表加载样式 | 详见API文档 |
10、navigation : 导出按钮选项,配置导出按钮及打印样式等,详见API文档。
11、pane :极性图表和角仪表选项配置(这两种表是在新版本2.0.1新增加的选项)
12、plotOptions :数据点选项。分不同图表类型配置不同,下面就常用的选项及spline选项列表如下
参数 | 描述 | 默认值 |
enable | 是否在数据点上直接显示数据 | false |
allowPointSelect | 是否允许使用鼠标选中数据点 | false |
formatter | 回调函数,格式化数据显示内容 | formatter: function() { return this.y; } |
marker | 对某个点标记,多种样式可选 |
13、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、spline | line |
14、subtitle : 副标题选项。和title配置一样,在title中详细讲解
15、title : 标题选项
参数 | 描述 | 默认值 |
text | 标题文本内容 | Chart title |
align | 水平对齐方式 | center |
verticalAlign | 垂直对齐方式 | top |
margin | 标题与副标题之间或者主图表区间的间距 | 15 |
floating | 是否浮动,如果为true,则标题可以偏离主图表区,可配合x,y属性使用 | false |
style | css样式 |
{ color: ‘#3E576F’, |
x | 按照水平对齐方式的距离 | 0 |
y | 按照垂直对齐方式的距离 | 15 |
16、tooltip :数据点提示框选项
参数 | 描述 | 默认值 |
enable | 是否显示提示框 | true |
backgroundColor | 设置提示框的背景色 | rgba(255, 255, 255, .85) |
borderColor | 提示框边框颜色,默认自动匹配数据列的 | auto |
borderRadius | 提示框圆角度 | 5 |
shadow | 设置提示框内容样式,如字体颜色等 | color:’#333′ |
formatter |
回调函数,用于格式化输出提示框的显示内容。 返回的内容支持html标签如:<b>, <strong>,<br/> |
17、xAxis :x轴选项
参数 | 描述 | 默认 |
categories |
设置X轴分类名称,数组,例如: categories: ['Apples', 'Bananas', 'Oranges'] |
[] |
title |
X轴名称,支持text、enabled、align、rotation、style等属性 |
|
labels |
设置X轴各分类名称的样式style,格式formatter,角度rotation等 |
|
max |
X轴最大值(categories为空时),如果为null, 则最大值会根据X轴数据自动匹配一个最大值 |
null |
min |
X轴最小值(categories为空时),如果为null, 则最小值会根据X轴数据自动匹配一个最小值 |
null |
gridLineColor |
网格(竖线)颜色 |
#C0C0C0 |
gridLineWidth |
网格(竖线)宽度 |
1 |
lineColor |
基线颜色 |
#C0D0E0 |
lineWidth |
基线宽度 |
0 |
18、yAxis :y轴选项
和x轴配置相同或类似。
注意:1、以上所有参数如果没特殊要求,及为默认是,可不用再代码中配置
2、API中还有更多的配置选项,可通过阅读API了解详细
3、红色部分为主要配置内容
四、实例说明HighCharts开发步骤
1、要求
1)绘制一个显示本站2012/9/22日访问统计,包括浏览量(pv),IP数的折线图。
2)x轴按每小时统计,y轴显示对应的数量
3)折线图上x轴对应的点显示数量,当鼠标经过改点时,用提示框形式显相关信息
4)要有图例显示每条折现代表什么数据信息
5)图表右下角加上“我爱物联网”字样并链接到www.52wulian.org
6)要有主标题和副标题
7)要能实现图表打印及导出常见格式的图片功能
2、开发步骤
1)新建一个文件夹名为“HighCharts”,并在该文件夹内新建一个名为“js”的文件夹,将所需的“highcharts.js”和“exporting.js”拷贝至“js”文件夹。
2)在“HighCharts”文件夹里新建一个html文件,随意命名,用文本编辑器写入如下内容:(html代码,相信大家都看的懂)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!-- 加载 jquery -- > <script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" > </script> <!-- javascript代码 -- > <script type = "text/javascript" > $ ( function ( ) { var chart ; $ ( document ) . ready ( function ( ) { //定义一个HighCharts chart = new Highcharts . Chart ( { } ) ; } ) ; } ) ; </script> <!-- 加载 highC主 js文件 , -- > <script src = "js/highcharts.js" > </script> <!-- 加载 exporting ,是 highCharts实现打印,下载图片必须的 js文件,如果不需要该功能,可不用 -- > <script src = "js/exporting.js" > </script> <!-- 新建一个容器,存放在 head部分定义的 Chart内容 。这里的 id一定是 chart : { . . . }内的 renderTo的值 -- > <div id = "highcharts1" style = "min-width:400px;height:400px;margin:0 auto;" > |
3)配置chart中每个选项的属性,代码如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
<!-- 加载 jquery -- > <script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" > </script> <!-- javascript代码 -- > <script type = "text/javascript" > $ ( function ( ) { var chart ; $ ( document ) . ready ( function ( ) { //定义一个HighCharts chart = new Highcharts . Chart ( { //配置chart选项 chart: { renderTo: 'highcharts1' , //容器名,和body部分的div id要一致 type: 'spline' //图表类型,这里选择折线图 } , //配置链接及名称选项 credits: { enabled : true , href : "http://www.52wulian.org" , text : "浏览总理:291,IP总数:74 -- 我爱物联网" } , //配置标题 title: { text: '我爱物联网 2012/09/22 访问统计' , y: 10 //默认对齐是顶部,所以这里代表距离顶部10px } , //配置副标题 subtitle: { text: '数据来源:百度统计' , y: 30 } , //配置x轴 xAxis: { categories: [ '0' , '1' , '2' , '3' , '4' , '5' , '6' , '7' , '8' , '9' , '10' , '11' , '12' , '13' , '14' , '15' , '16' , '17' , '18' , '19' , '20' , '21' , '22' , '23/点' ] } , // 配置y轴 yAxis: { title: { text: '次数(次)' } , labels: { formatter: function ( ) { return this . value + '次' } } } , //配置数据点提示框 tooltip: { crosshairs: true , shared: true } , //配置数据使其点显示信息 plotOptions: { spline : { dataLabels: { enabled: true } , enableMouseTracking: true } } , //配置数据列 series: [ { name: '浏览次数(PV)' , marker: { symbol: 'square' } , data: [ 16 , 10 , 8 , 0 , 0 , 0 , 2 , 1 , 5 , 10 , 25 , 34 , 8 , 12 , 38 , 22 , 13 , 14 , 11 , 8 , 8 , 5 , 8 , 33 ] } , { name: 'IP数' , marker: { symbol: 'diamond' } , data: [ 7 , 2 , 1 , 0 , 0 , 0 , 1 , 1 , 3 , 5 , 4 , 2 , 5 , 5 , 2 , 1 , 5 , 3 , 1 , 4 , 4 , 4 , 5 , 9 ] } ] } ) ; } ) ; } ) ; </script> <!-- 加载 highC主 js文件 , -- > <script src = "js/highcharts.js" > </script> <!-- 加载 exporting ,是 highCharts实现打印,下载图片必须的 js文件,如果不需要该功能,可不用 -- > <script src = "js/exporting.js" > </script> <!-- 新建一个容器,存放在 head部分定义的 Chart内容 。这里的 id一定是 chart : { . . . }内的 renderTo的值 -- > <div id = "highcharts1" |
From:http://blog.csdn.net/wocaonima123987/article/details/8198673
HighCharts详细介绍相关推荐
- HTML页面加载和解析流程详细介绍
浏览器加载和渲染html的顺序.如何加快HTML页面加载速度.HTML页面加载和解析流程等等,在本文将为大家详细介绍下,感兴趣的朋友不要错过 浏览器加载和渲染html的顺序 1. IE下载的顺序是从上 ...
- mysql为什么要压测_mysql集群压测的详细介绍
本篇文章给大家带来的内容是关于mysql集群压测的详细介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. mysql压测 mysql自带就有一个叫mysqlslap的压力测试工具,通 ...
- php比较运算符案列,PHP实例:PHP比较运算符的详细介绍
<PHP实例:PHP比较运算符的详细介绍>要点: 本文介绍了PHP实例:PHP比较运算符的详细介绍,希望对您有用.如果有疑问,可以联系我们. 比拟运算符种类 PHP实战如同它们名称所暗示的 ...
- Tempdb数据库详细介绍
Tempdb数据库详细介绍 一.Tempdb简介 tempdb是SQLServer的系统数据库一直都是SQLServer的重要组成部分,用来存储临时对象.可以简单理解tempdb是SQLServer的 ...
- linux路由介绍,Linux的路由表详细介绍
Linux的路由表详细介绍 一 在Linux下执行route命令[root@localhost backup]# route -nKernel IP routing tableDestination ...
- pythonexcel介绍_Python 中pandas.read_excel详细介绍
Python 中pandas.read_excel详细介绍 #coding:utf-8 import pandas as pd import numpy as np filefullpath = r& ...
- 渡神纪帧数测试软件,渡神纪芬尼斯崛起配置要求高吗 渡神纪配置要求详细介绍_游侠网...
渡神纪芬尼斯崛起配置要求高吗?本作将在12月3日登陆主机和PC,很多玩家比较关心游戏的配置,这里给大家带来了渡神纪配置要求详细介绍,快来了解下吧. 渡神纪配置要求详细介绍 最低要求(720p/30 f ...
- C++11 unordered_map详细介绍
整理的算法模板合集: ACM模板 目录: 1.介绍 1.1 特性 2. 模版 2.1 迭代器 3. 功能函数 3.1 构造函数 3.2 容量操作 3.2.1 size 3.2.2 empty 3.3 ...
- autosar中com模块_详细介绍AUTOSAR各个模块作用PART1(OS,SYS)
这片文章中我们详细讲解下每个模块的功能,上图是vector的autosar方案,每个模块的详细介绍后续会有单独文章进行讲解,请关注.以下是各个模块的简介 1.VHSM hardware Securit ...
最新文章
- 【新周报(045)】青少年编程竞赛交流群周报
- 【转载】在对话框中加入属性页
- Makefile —— Makefile的规则是什么?make是如何工作的?make的工作方式是什么?
- GUI_PICTURE以及context_menu学习笔记
- 2021热度不减的在线教育,正在努力成为线下教育的有益补充
- CSRobot gen:mssql-c#类型映射
- eclipse 输入卡顿_7个小技巧,解决eclipse卡顿问题
- div无法触发blur事件解决的方法
- 28. PHP 文件上传
- 面向对象设计思想(马老师)——笔记
- zmap扫描mysql_zmap使用笔记
- Arcgis一些操作
- 基于SSM的教师本科教学质量评价管理系统
- linux基本命令整理——鸟哥linux私房菜第九章
- JavaScript之Ajax Util
- 空间解析几何 | 曲面的切平面与二元函数全微分的几何意义
- Edge浏览器配置教程
- 软件测试用例设计时的颗粒度
- 分析针对EFS加密文件无法打开的情况数据恢复的解决方式
- Revit API 之 气泡
热门文章
- 苹果自研芯片:步步惊心
- SAP 交货成本(运费)
- 2019 爱奇艺校招笔试题 平方串
- Matplotlib: 单独画一个colorbar 并调整colorbar的方向
- 数据结构与算法二:时间/空间复杂度(complexity)
- Kali linux下图片隐写,图片隐写信息快速检测工具——zsteg
- 高校招聘计算机考试真题,国家电网校园招聘计算机类考试专用题库真题
- 微型计算机自动化控制专业,你也能考国家电网之自动控制类专业!
- ROS机器人Diego 1#制作(十六)创建机器人的urdf模型描述文件
- Mysql学习笔记之事务详解(读未提交、读以提交、可重复读、串行化读)