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

最新推荐文章于 2024-09-10 10:49:18 发布

原创最新推荐文章于 2024-09-10 10:49:18 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

3 篇文章

订阅专栏

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

项目中的报表配置如下：

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