Highcharts,Highslide常用方法属性介绍

在做数据报表时候，由于其兼容性好，功能强大，Highcharts插件是比较好的选择。Highcharts支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图等等，并且对PC/Tablet/Phone的各种浏览器都支持的很好。下面结合项目说说Highcharts常用的方法和属性。

Highcharts作为命名空间，其下包括一个变量的集合。我们通常这样来定义一个全局的图表对象,示例化Highcharts对象的同时进行命名。

var hc = new Highcharts.Chart(options);

以下方法或属性的调用方式是Highcharts.MethodOrPropertises

Highcharts常用方法或属性：

1.Chart方法Chart (Object options, Function callback)

本方法作为创建图表对象的构造函数，包括两个参数，在IE8以下，有时图表初始化时文档还没有完全加载完成，图表对象还没有建立完成，会造成一些影响。因而，依赖于图表对象的代码应该写在回调函数中，同样效果的做法是使用chart.event.load。

2.charts属性

返回值为当前页面所有的图表对象数组。

3.dateFormat (String format, [Number time], [Boolean capitalize])

将一个javascript时间戳（毫秒）转为可读性的日期时间串。time参数为js数字时间串，capitalize参数规定返回值是否要首字母大写，format参数可以参考PHP手册中关于函数strftime()的介绍。

4.dateFormats

此描述符用于定义系统未提供的日期格式，一般以key:value形式定义，描述符作为key，定义一个函数作为value，该函数根据自身需要返回目标日期格式。
例如：

    /**
     * Add custom date formats
     */
    Highcharts.dateFormats = {
        W: function (timestamp) {
            var date = new Date(timestamp),
                day = date.getUTCDay() == 0 ? 7 : date.getUTCDay(),
                dayNumber;
            date.setDate(date.getUTCDate() + 4 - day);
            dayNumber = Math.floor((date.getTime() - new Date(date.getUTCFullYear(), 0, 1, -6)) / 86400000);
            return 1 + Math.floor(dayNumber / 7);
            
        }
    }

5.numberFormat (Number number, [Number decimals], [String decimalPoint], [String thousandsSep])

该方法生成一个格式化的js数字串，函数可以接收一个、两个、四个参数，而不可以是三个。number参数是要加工的数字，decimals是小数的位数，decimalPoint规定用什么字符作为小数点，thousandsSep字符作为千分符。PHP中也有以此名字命名的函数number_format()，如果需要更多了解可以参照php手册。

PHP的函数声明格式：

string number_format ( float $number [, int $decimals = 0 ] )
string number_format ( float $number , int $decimals = 0 , string $dec_point = '.' , string $thousands_sep = ',' )

6.setOptions (Object options)

调用此方法，会给所有创建的图表都设置options。例如：

    Highcharts.setOptions({
        colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
        chart: {
            backgroundColor: {
                linearGradient: [0, 0, 500, 500],
                stops: [
                    [0, 'rgb(255, 255, 255)'],
                    [1, 'rgb(240, 240, 255)']
                ]
            }
    ,
            borderWidth: 2,
            plotBackgroundColor: 'rgba(255, 255, 255, .9)',
            plotShadow: true,
            plotBorderWidth: 1
        },
    //……
    }

或者

Highcharts.setOptions({global:{useUTC : false}});  

其中，如果用到颜色取值，可以来这个网址进行对应。http://www.w3school.com.cn/html/html_colorsfull.asp

Highslide方法hs.htmlExpand(),hs.expand()可以参考官方文档，点击查看http://www.highslide.com/ref/hs.expand

hs.htmlExpand函数作为hs.expand 的一个特例，是建立一个包含HTML内容的扩展器，而不是hs.expand函数的图片内容。在遇到Ajax，Iframe和Flash内容时，hs.htmlExpand才能体现其价值所在，可以将扩展内容加工处理写进目标内容区域。

其原型为：boolean hs.htmlExpand( DOMElement element [, Object overrides [, Object custom]] )

hs.expand 函数的原型：boolean hs.expand( DOMElement element [, Object overrides [, Object custom]] )
该函数一般用于单击弹出一个内置小图的大图，背后逻辑当单击事件返回true，则弹出行为触发，若弹出成功，返回false，弹出失败，返回true。默认行为是打开href属性指向的图片。该方法的第二、第三个参数用于定制符合用户需求的图片弹出效果。

//用法实例1
<a class="highslide" href="../samples/full3.jpg"
      οnclick="return hs.expand(this,
      { outlineType: 'rounded-white', targetX: 'thumb1' })">
   <img src="../samples/thumb3.jpg" alt=""/>
</a>
//用法实例2
<a class="highslide" href="../samples/full3.jpg" οnclick="return hs.expand(this, null,
      { myAlert: 'This is a custom variable' } )">
   <img src="../samples/thumb3.jpg" alt=""/>
</a>
//用法实例3
hs.expand(null, {
    src: 'image1.jpg'
});
//用法实例4
<div class="highslide-caption">
   <h1 οnclick="alert(hs.getExpander(this).custom.myAlert)">Click me</h1>
</div>
//用法实例5
<a class="highslide" href="../samples/full3.jpg"
      οnclick="return hs.expand(this, null, { foo: 'Happy', bar: 'coding' } )">
   <img src="../samples/thumb3.jpg" alt=""/>
</a>
<div class="highslide-caption">
  The Highslide author says "{foo} {bar}!"
</div>

部分常用API介绍：

Chart：图表区选项
---------------------

renderTo 引用容器，html中放置图表的容器，html设置该DIV的id属性值
borderWidth 设置图表边框宽度
borderRadius 设置图表边框圆角角度
backgroundColor 设置图表区背景色
className　确定绘图区容器的类区范围
defaultSeriesType　默认绘图类型的设置
events绘图触发事件
addSeries　添加series数据
click　该函数定义单击事件
load　该函数定义加载事件
redraw　该函数定义重画事件
selection　该函数定义选着区域事件
type　绘图类型 默认：line
width　绘图宽度的设置
height高度
ignoreHiddenSeries多个数据时，隐藏一个数据是否更改轴心，默认true为可更改
inverted　数轴的转换默认false
margin　内边距设置
marginTop
marginBottom
marginLeft
marginRight
plotBackgroundColor部分颜色的变化
plotBackgroundImage　加载图片
plotBorderColor
plotBorderWidth
plotBorderShadow
reflow　　是否跟谁容器大小改变
resetZoonButton　区域选择与重置图片与event事件中的selection事件相似
selectionMarkerFill　悬着区域的颜色
shadow阴影
showAxes　加载前轴的显示
spacingTop　外边距
spacingBottom
spacingLeft
style 设置CSS样式，驼峰写法
zoomType　区域选择范围   可与event.selection和resetZoomButton参考，他们是区域选择的功能接口
----------------------------
credits　右下角的名片说明

enabled　默认值true显示名片
position　位置的确定
href　名片连接地址   默认值：www.highcharts.com
style　名片CSS样式
text　名片显示的文本　　默认值：highcharts.com
-----------------------
global　　Highcharts.SetOptions方法调用

canvasToolsURL 画布工具连接，例如：Andrio的 2.0不支持SVG
useUTC　　　　是否使用UTC time　
---------------------------
xAxis：yAxis: X和Y坐标轴的参数

gridLineColor 网格颜色
reversed 是否反向/转置坐标系 true ,false
gridLineWidth 网格粗细
startOnTick 是否从坐标线开始画图区域
endOnTick 是否从坐标线结束画图区域
tickmarkPlacement 坐标值与坐标线标记的对齐方式on,between
tickPosition 坐标线标记的样式 向内延伸还是向外延伸(insidel,outside)
tickPixelInterval 决定着横坐标的密度
tickColor 坐标线标记的颜色
tickWidth 坐标线标记的宽度
lineColor 基线颜色
lineWidth 基线宽度
max 固定坐标最大值
min 固定坐标最小值
plotlines 标线属性
maxZoom
minorGridLineColor
minorGridLineWidth
minorTickColor
-----------------
title 标题属性

enabled： 是否显示
text： 坐标名称
Labels 坐标轴值显示类 默认：defaultLabelOptions
formatter 格式化函数
enabled 是否显示坐标轴的坐标值
rotation 倾斜角度
align 与坐标线的水平相对位置
x 水平偏移量
y 垂直偏移量
style 设置CSS样式
font 字体样式 默认defaultFont
color 字体颜色
---------------------
Tooltip 数据点的提示框

enabled 鼠标经过时是否可动态呈现true,false
formatter 格式化提示框的内容样式

---------------------------
plotOptions 画各种图表的数据点的设置

Area类:
lineWidth 线宽度
fillColor area的填充颜色组
marker{} 设置动态属性
shadow 是否阴影 true,false
states 设置状态
Line类
dataLabels: 数据显示类
enabled 是否直接显示点的数据true,false
--------------------------------
colors 颜色设置
用于展示图表，折线/柱状/饼状等图的颜色，数组形式。
--------------------------------
Legend：图例选项
layout 显示形式，支持水平horizontal和垂直vertical，默认horizontal
align对齐方式。默认center
backgroundColor图例背景色。
borderColor图例边框颜色，默认#909090
borderRadius图例边框角度
enabled 是否显示图例
floating是否可以浮动，配合x，y属性。 默认不显示
shadow 默认不显示阴影
style 设置图例内容样式
---------------------------
Navigation按钮和图例选项

buttonOptions设置导出,打印按钮的选项，如显示的位置，样式，是否启用等
menuItemHoverStyle悬停在图例上面的样式
menuItemStyle 样式
mentStyle 设置样式
----------------------------
Loading 在图形上显示loading文字

hideDuration 设置loading标签淡出的时间，默认100
showDuration 设置loading标签淡入的时间，默认100
labelStyle 是Loading标签样式
style 设置样式，涵盖了绘图区
----------------------------
series 数据列

name 该条曲线名称
data[] 该条曲线的数据项
addPoint([x,y],redraw,cover) 添加描点，redraw 是否重画，cover是否左移
setData: function(data, redraw) 重新设置Data数组，redraw是否重画
remove: function(redraw) 删除曲线
redraw: function() 重画曲线
marker ：标记点
enabled 是否显示描点

最后，项目报表需要，这里列出自己项目的js代码，分享。使用了上面的Highchart。jQuery和Ajax。

<script type="text/javascript" src="./static/js/jquery.min.js"></script>
<script type="text/javascript">
	$(function () {
        // define the options
        var options = {

            chart: {
				renderTo: 'container',  
				type: 'line',  
				events: {  
					load: function (event) {  
						for (var i = this.series.length - 3; i > 1; i--) {  
							this.series[i].hide();        //设置只显示其中四条线，其他都不显示  
						}  
					}  
				}  
            },

            title: {
                text: 'iOS月报表—数据走势图',
		margin: 15
            },

            subtitle: {
                text: ''
            },

            xAxis: {
				title: {
					text: '时间',
					style: {
						color: '#C00',
						fontWeight: 'bold'
					}
				},
				type:'category',
                tickWidth: 2,
				gridLineWidth: 0,
				lineWidth:2,
                labels: {
                    align: 'center',
                }
            },

            yAxis: [{ // left y axis
                title: {
                    text: '人/次',
			style: {
				color: '#C00',
				fontWeight: 'bold'
			}
                },
                labels: {
                    align: 'left',
                    x: 3,
                    y: 16,
                    formatter: function() {
                        return Highcharts.numberFormat(this.value, 0);
                    }
                },
                showFirstLabel: false
            }, { // right y axis
                linkedTo: 0,
                gridLineWidth: 0,
                opposite: true,
                title: {
                    text: null
                },
                labels: {
                    align: 'right',
                    x: -3,
                    y: 16,
                    formatter: function() {
                        return Highcharts.numberFormat(this.value, 0);
                    }
                },
                showFirstLabel: false
            }],

            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 70,
                borderWidth: 0,
				itemMarginTop: 5,
				itemMarginBottom: 5
            },

            tooltip: {
                shared: true,
                crosshairs: true,
				style: {
					fontSize: '11px',
					fontFamily: 'tahoma,arial,simSun,Microsoft Yahei'
				}
            },

            plotOptions: {
                series: {
                    cursor: 'pointer',
					allowPointSelect: true,
                    point: {
                        events: {
                            click: function() {
                                hs.htmlExpand(null, {
                                    pageOrigin: {
                                        x: this.pageX,//定义弹窗的横坐标
                                        y: this.pageY
                                    },
                                    headingText: this.series.name,
                                    //maincontentText: this.category + ': '+ this.y +' 人/次',
                                    maincontentText: this.category.substring(0,4) + '年' + this.category.substring(5,7) + '月' + ': '+ this.y +' 人/次',
                                    width: 200
                                });
                                /*
                                hs.htmlExpand(null, {
                                    pageOrigin: {
                                        x: this.pageX,
                                        y: this.pageY
                                    },
                                    headingText: this.series.name,
                                    maincontentText: Highcharts.dateFormat('%Y, %b %e, %Y', this.x) +':<br/> '+
                                        this.y +' visits',
                                    width: 200
                                });
                                */
                            }
                        }
                    },
                    marker: {
                        lineWidth: 1
                    }
                }
            },
			credits: {    
                enabled: true,     //是否显示网站标志如url  
		href: 'http://www.feiliu.com',//默认highcharts网站的url
		text: 'Powered by Feiliu'
            },
            series: [{
                name: '新增用户数',
                lineWidth: 4,
                marker: {
                    radius: 4
                }
            }, {
                name: '注册/绑定用户数'
            }, {
                name: '联网用户数'
            }, {
                name: '联网次数'
            }, {
                name: '下载次数'
            }, {
                name: '下载人数'
            }]
        };


        // Load data asynchronously using jQuery. On success, add the data
        // to the options and initiate the chart.
        // This data is obtained by exporting a GA custom report to TSV.
	//GA = Google analytics 是谷歌公司的一款免费企业级分析软件，任何人都可以免费注册使用。软件的特点是电子商务功能。GA自定义报告
        // http://api.jquery.com/jQuery.get/
		var datestart = document.getElementById("monthstart").innerHTML;
		var dateend = document.getElementById("monthend").innerHTML;
        jQuery.get('http://pmtest.feiliu.com/?c=ptd&a=monthchart', {timestart:datestart,timeend:dateend}, function(data, state, xhr) {
            var records = [],
                date,
                // set up the data series
				allDate = [],
                newUsers = [],
                regUsers = [],
				connUsers = [],
				connTimes = [],
				dlTimes = [],
				dlUsers = [];
            // inconsistency
            if (typeof data !== 'string') {
                data = xhr.responseText;
            }
            // split the data return into lines and parse them
			data = eval('(' + data + ')');
            jQuery.each(data, function(i, record) {
                // all data records start with a double quote
				date = record.monthnm;
				newUsers.push([
					date,
					parseInt(record.newuser, 10)
				]);
				regUsers.push([
					date,
					parseInt(record.reguser)
				]);
				connUsers.push([
					date,
					parseInt(record.connuser)
				]);
				connTimes.push([
					date,
					parseInt(record.conntime)
				]);
				dlTimes.push([
					date,
					parseInt(record.dltime)
				]);
				dlUsers.push([
					date,
					parseInt(record.dluser)
				]);
				allDate.push(date);
            });
            options.series[0].data = newUsers;
            options.series[1].data = regUsers;
            options.series[2].data = connUsers;
            options.series[3].data = connTimes;
            options.series[4].data = dlTimes;
            options.series[5].data = dlUsers;
            options.xAxis.categories = allDate;
            //两种方式，或者也可下面这样设置
            //Highcharts.setOptions({xAxis: {categories: allDate}});
            $('#container').highcharts(options);
        });
    });
</script>