报表统计之Highcharts插件结合项目+API浅析

 

项目中的报表配置如下：

<script>
$(function () { //JQuery初始化加载默认方法
//自定义颜色数组
var color = ['#9BBB59','#4BACC6','#F79646','#8064A2','#59A529','#C0504D','#3A889D','#4897F1','#80D346','#000000'];
//初始化控件
$('#container').highcharts({
//加载颜色数组
colors:color,
//版权信息,这里默认没加href
credits: {
text:'点击指标即可选择性查看',
style:{cursor:'pointer',color:'#909090',fontSize:'11px'},
position: {
align: 'right',
y:-20
}
},
//使用HTML渲染图例项目的文本
useHTML:true,
//图表区、图形区和通用图表配置选项
chart: {
type: 'column'//柱状图
},
//标题,包括即标题和副标题，其中副标题为非必须的
title: {
text: '',//标题为空
useHTML:true
},
//导出模块,导出功能配置，导出即将图表下载为图片或打印图表
exporting:{
enabled:false//关闭了导出功能
},
//X轴（或分类轴）。 通常情况下，它是横向的,
//通过设置 chart.inverted 属性为 true，则是竖向的。在有多个轴的时候，xAxis配置是一个数组。
xAxis: {
//categories: 多个的情况下,是一个Array数组
categories: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
},
//Y轴（或数值轴）。 通常情况下，它是竖向的,
//通过设置 chart.inverted 属性为 true，则是横向的。在有多个轴的时候，xAxis配置是一个数组。
yAxis: {
min: 0,
title: {
text: ''
}
},
//数据点提示框 当鼠标滑过某点时，以框的形式提示改点的数据，比如该点的值，数据单位等
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table style="width:200px;">',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y} </b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
//数据点配置, 针对不同类型图表的配置
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
//数据列, 图表上一个或多个数据系列，比如图表中的一条曲线，一个柱形
series: [{//tooltip中用到
name: '呼叫客户数',
data: [${sb1}]
}, {
name: '有效呼叫',
data: [${sb2}]
}, {
name: '呼出时长',
data: [${sb7}]
}, {
name: '意向客户数',
data: [${sb3}]
}, {
name: '签约客户数',
data: [${sb4}]
}, {
name: '签约金额',
data: [${sb5}]
}]
});
});
</script>

 

其中的${sb}是又后台计算好的数值，前台EL表达式进行取值。

 

参考Highcharts翻译系列：http://www.2cto.com//special/Highcharts/

 

再次我要特别感谢Paul Lu胡，看到他的文章让我受益匪浅，

Paul Lu胡：http://www.retailscm.com/