HighCharts初识
- Highcharts官网:http://www.highcharts.com
- Highcharts官网Demo:http://www.highcharts.com/demo
- Highcharts官网文档:http://www.highcharts.com/docs
- Highcharts官网API:http://api.highcharts.com/highcharts
<script type="text/javascript" src="highcharts.js"></script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 400">
</div>
</body>
<script type="text/javascript">
$(function(){
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'My Study HighCharts'
},
xAxis: {
categories: ['my', 'first', 'chart']
},
yAxis: {
title: {
text: 'sth'
}
},
series: [{
name: 'Jone',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
</script>
< /html>
Title
和
Subtitle
,即标题和副标题,其中副标题为非必须的。
title: { text: '自定义标题' }, subtitle: { text: '自定义副标题' }动态修改Title:
Chart.setTitle()
var chart = new Highcharts.Chart(); //Chart 构造方法 chart.setTitle("自定义标题");获取Title的值:
var chart = new Highcharts.Chart(); //Chart 构造方法 alert(chart.title.text); //直接通过属性获取值
xAxis
和yAxis
,即x轴和y轴。多个不同的数据列可共用同一个X轴或Y轴,当然,还可以有两个X轴或Y轴,分别显示在图表的上下或左右。chart.inverted = true
可以让x,y轴显示位置对调。xAxis:{ title:{ text:'x轴标题' } } yAxis:{ title:{ text:'y轴标题' } }
enabled
、formatter
、setp
、staggerLines
1、enabled
是否启用Labels。x,y轴默认值都是true
,如果想禁用(或不显示)Labels,设置该属性为false
即可。
2、Formatter
标签格式化函数。默认实现是:
formatter:function(){ return this.value; }
this.value
代码坐标轴上当前点的值(也就是x轴当前点的x值,y轴上当前点的y值)
value
变量外,还有axis
、chart
、isFirst
、isLast
可用。yAxis: { labels: { formatter:function(){ if(this.value <=100) { return "第一等级("+this.value+")"; }else if(this.value >100 && this.value <=200) { return "第二等级("+this.value+")"; }else { return "第三等级("+this.value+")"; } } } },效果为:
4、staggerLines
水平轴Lables显示行数。(该属性只对水平轴有效)当Lables内容过多时,可以通过该属性控制显示的行数。和该属性相关的还有maxStaggerLines
属性。
Axis Tick
Tick为坐标轴刻度。默认情况下x轴刻度高(tickLength
属性)为5px,宽为1px;y轴宽为0px(也就是不显示刻度)。Tick相关的属性主要有tickLength
、tickWidth
、tickColor
、tickInterval
、tickmarkPlacement
。
1、tickLength、tickWidth、tickColor
分别代表刻度线的长度、宽度、颜色。
2、tickInterval
刻度间隔。其作用和Lables.step
类似,就是不显示过多的x轴标签内容,不同的是,tickInterval
是真正意义上的调整刻度,而Lables.step
只是调整Labels显示间隔。所以在实际应用中,tickInterval
用的多。
针对不同数据类型的坐标轴有不同的默认值。对于线性数据和Datetime
类型数据,其默认值是tickPixelInterval
值,对于Categorty
表示间隔一个category。
3、tickmarkPlacement
刻度线对其方式,有between
和on
可选,默认是between
。设置为on
后的变化如下图:
Axis gridLines
坐标轴网格线。默认情况下,x轴网格线宽度为0,y轴网格线宽度为1px。网格线共有三个属性可设置,分别是:gridLineWidth
、gridLineColor
、gridLineDashStyle
1、gridLineWidth
网格线宽度。x轴默认为0,y轴默认为1px。
2、gridLineColor
网格线颜色。默认为:#C0C0C0
。
3、gridLineDashStyle
网格线线条样式。和Css border-style类似,常用的有:Solid
、Dot
、Dash
。
总结如下:
Series
中设置每个轴值时,用轴数组下标关联。- 设置
opposite: true
表示该轴位置反转,即为y轴时显示在右侧,为x轴时显示在顶部(和正常情况下x轴在下,y轴左构成反转)。 - 在
Series
中可以设置该轴的类型,多个轴不同的类型(例如:type:'spline'),就构成了多种图表并存的混合图。
坐标轴中,可以通过Type
指定坐标轴类型,有linear
、logarithmic
、datetime
、category
可选,默认是:linear
。指定类型的实例代码如下:
// The types are 'linear', 'logarithmic' and 'datetime' yAxis: { type: 'linear', } // Categories are set by using an array xAxis: { categories: ['Apples', 'Bananas', 'Oranges'] }
linear
线性轴。默认类型,x轴按照Axis.tickInterval
值增长,y轴默认是自适应。
logarithmic
对数轴。按照数学中的对数增长,例如1,2,4,8... 用的不多,主要用于对数图表,实例请查看在线演示平台的 对数直线图。
datetime
时间轴。时间使用和Javascript 日期对象一样,即用一个距1970年1月1日0时0分0秒的毫秒数表示时间,也就是时间戳。更多Javascript 日期对象请阅读W3C school 相关内容。
Highcharts有很多时间格式化函数,列举如下:
1、Date.getTime()
获取当前时间戳。实例用法如下:
time = Date.getTime(); //time = 1384442746960 (ms) 当前时间为 2013-11-14 23:25:46
2、Date.UTC(year,month,day,hours,minutes,seconds,millisec)
通过UTC方式获取指定时间的毫秒数,例如获取 2013-11-14 00:00:00的毫秒数代码如下:
time = Date.UTC(2013,11,14,0,0,0,0); // time = 1386979200000 (ms);
3、Highcharts.dateFormat(String format)
Highcharts时间格式化函数,同 PHP格式化函数。具体用法参考API文档 Highcharts.dateFormat()
,当然,在本教程的《函数使用》章节中具体讲解。
category
数组轴。