Highcharts学习笔记
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
div{
float:left;
}
</style>
<script type="text/javascript" src="./jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="./highcharts.js"></script>
<script type="text/javascript" src="./highcharts-3d.js"></script>
<script type="text/javascript">
$(function(){
/* zk获取后台传过来的参数
var textboxMonth = zk.Widget.$(jq("$workSheetMonth"), document);
var month = textboxMonth.getValue();
var textboxData = zk.Widget.$(jq("$workSheetData"), document);
var data = textboxData.getValue();
var monthArray = month.split(",");
var dataArray = data.split(";");
var array0 = dataArray[0].split(",");
var array1 = dataArray[1].split(",");
var array2 = dataArray[2].split(","); */
$('#container1').highcharts({
chart: {
type: 'column'
},
title: {
text: '测试柱形图'
},
xAxis: {
categories: ['2015年4月','2015年5月','2015年6月'],
// categories: monthArray,
crosshair: true
},
yAxis: {
min: 0,
max: 100,
title: {
text: ''
},
labels : {
formatter : function() {//设置纵坐标值的样式
return this.value + '%';
}
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table width="120px">',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} %</b></td></tr>',
footerFormat: '</table>',
// shared: true, //各柱子是否共享提示
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
//去掉右下角的highcharts.com
credits: {
enabled:false
},
//去掉右上角的打印及其导出按钮
//当然不引入exporting.js也不会显示
//exporting: { enabled:false },
series: [{
name: 'Issue完成率',
color:'#6DA2FF',
data: [22,33,61],
// data: [Number(array0[0]),Number(array1[0]),Number(array2[0])],
dataLabels: {
enabled: true, //默认是false，即默认不显示数值
color: '#666', //字体颜色
align: 'center', //居柱子上方中间
formatter : function() {//设置纵坐标值的样式
return this.y + '%';
}
}
}, {
name: 'Issue及时率',
color:'#FF7979',
data: [34,45,21],
dataLabels: {
enabled: true, //默认是false，即默认不显示数值
color: '#666', //字体颜色
align: 'center', //居柱子上方中间
formatter : function() {//设置纵坐标值的样式
return this.y + '%';
}
}
}, {
name: 'Issue成功率',
color:'#96DF69',
data: [4,56,78],
dataLabels: {
enabled: true, //默认是false，即默认不显示数值
color: '#666', //字体颜色
align: 'center', //居柱子上方中间
formatter : function() {//设置纵坐标值的样式
return this.y + '%';
}
}
}]
});
//倾斜环形图(3d) 环形图都是在饼图的基础上设置形成
jQuery('#container2').highcharts({
chart: {
type: 'pie',
options3d: {
enabled: true, //3d图形
alpha: 45 //倾斜45
}
},
//设置每个环形的颜色
colors:['#EFAAD3','#3CB2CF','#F7C359'],
title: {
text: '测试环形图'
},
//去掉右下角的highcharts.com
credits: {
enabled:false
},
plotOptions: {
pie: {
innerSize: 80, //内环大小
depth: 0, //3d环厚度
showInLegend: true,
dataLabels: {
enabled: true,
format: '{point.name}:{point.y:.lf}条[{point.percentage:.1f}%]'
}
}
},
series: [{
name: '工单数',
data: [
['策略高', 23],
['策略中', 32],
['策略低', 111]
]
/* data: [
[array0[0], Number(array0[1])],
[array1[0], Number(array1[1])],
[array2[0], Number(array2[1])]
]
*/
}]
});
});
</script>
</head>
<body>
<div id="container1" style="min-width: 700px; height: 400px;"></div>
<div id="container2" style="min-width: 550px; height: 400px;"></div>
</body>
</html>
效果图如下：
