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(),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,500,500],stops: [
[0,'rgb(255,255,255)'],[1,'rgb(240,240,255)']
]
},borderWidth: 2,plotBackgroundColor: 'rgba(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 其原型为：boolean hs.htmlExpand( DOMElement element [,Object overrides [,Object custom]] ) hs.expand 函数的原型：boolean hs.expand( DOMElement element [,Object custom]] ) //用法实例1
<a class="highslide" href="../samples/full3.jpg"
onclick="return hs.expand(this,{ outlineType: 'rounded-white',targetX: 'thumb1' })">
<img src="../samples/thumb3.jpg" alt=""/>
</a>
//用法实例2
<a class="highslide" href="../samples/full3.jpg" onclick="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 onclick="alert(hs.getExpander(this).custom.myAlert)">Click me</h1>
</div>
//用法实例5
<a class="highslide" href="../samples/full3.jpg"
onclick="return hs.expand(this,{ foo: 'Happy',bar: 'coding' } )">
<img src="../samples/thumb3.jpg" alt=""/>
</a>
<div class="highslide-caption">
The Highslide author says "{foo} {bar}!"
</div>
部分常用API介绍： 最后，项目报表需要，这里列出自己项目的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,opposite: true,title: {
text: null
},labels: {
align: 'right',x: -3,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,y: this.pageY
},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>
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |