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

本文详细介绍了使用Highcharts实现报表的具体配置方法,包括颜色设定、图表类型选择、数据点提示框样式调整等内容,并提供了完整的代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

项目中的报表配置如下:

<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/

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值