highchart 绘制柱状图的方法与接口


       本文给出使用 highchart 绘制柱状图的方法与接口。


       一、  数据结构与基本接口  

       一般绘制图形, 会涉及到较复杂的数据结构, 比如使用 jsPlumb 绘制拓扑图的通用接口 。方法是, 首先要弄清楚绘制图形所需要的数据结构,然后根据API文档设计一个公共接口, 并写好详细的文档,避免日后忘记。先从最基本的接口开始, 见下面代码。 这是根据静态示例, 将需要动态生成或配置数据的地方抽取出来做成的接口。      

/**
 * 创建柱状图(基本接口)
 * @param chartDivName  用来绘制柱状图的 DIV-ID 值
 * @param chartData     柱状图数据结构
 *                      categories: [‘c1‘, ‘c2‘, ..., ‘Cn‘]
 *                      series: [
 *                          { name: ‘var1‘, data: [d11, d12, ..., d1n]},  
 *                          { name: ‘var2‘, data: [d21, d22, ..., d2n]},
 *                          ...,
 *                          { name: ‘varN‘, data: [dn1, dn2, ..., dnn]}
 *                      ]
 * @param chartConfig  柱状图全局配置
 *                        title:  图表标题
 * @returns
 */
function generateColumnChart(chartDivName, chartData, chartConfig) {
	var displayFormatter = function() {  // 当鼠标悬停图表上时, 格式化提示信息
    	var tipText = ‘<b>‘ + this.x + ‘</b>‘;
    	var total = 0;
    	$.each(this.points, function(i, point) {
        	total += point.y;
        });
        $.each(this.points, function(i, point) {
        	tipText += ‘<br/>‘+ point.series.name +‘: ‘+ Highcharts.numberFormat((point.y*100 / total), 2) + ‘%‘ + ‘(‘ + point.y + ‘)‘;
        });
        return tipText;
    };
    
    var chartObj = obtainCommonChartObj(displayFormatter);
	chartObj.title.text = chartConfig.title;
	chartObj.xAxis.categories = chartData.categories;
	chartObj.series = chartData.series;
	var seriesNum = (chartData.series == null ? 0 : chartData.series.length);
	for (var k=0; k < seriesNum; k++) {
		chartObj.series[k].type = ‘column‘;
	}
	
	var chartdiv = $(‘#‘+chartDivName);
	chartdiv.highcharts(chartObj);
}


function obtainCommonChartObj(displayFormatterFunc) {
	
	   var commonChartObj = {
			chart: {
				zoomType: ‘x‘,
				events: {
					click: null
				},
				resetZoomButton: {
					position: {
	                    x: -10,
	                    y: 10
	                },
	                relativeTo: ‘chart‘
				}
			},
			
			// 去掉 highcharts.com 链接
			credits: {
				enabled: false,
				text: ‘‘
			},
			
			plotOptions: {
				series: {
					// 去掉点的marker, 使图形更美观
	                marker: {
	                    enabled: false,
	                    states: {
	                        hover: {
	                            enabled: true
	                        }
	                    }
	                },
	                turboThreshold: 0,
	                events: {
	                	click: null
	                }
	            },
	            line: {
	            	lineWidth: 1.5
	            }
			},
			
			series: [],
			xAxis: {
			},
			yAxis: {
				title: {
					text: ‘‘
				},
			    min: 0
			},
			
			tooltip: {
				crosshairs: true,
				shared: true,
	            formatter: displayFormatterFunc
	        },
	        
		    title: {
		    	// 动态显示图表标题
		    	text: ‘‘,
		    	align: ‘center‘,
		    	style: {
		    		fontSize: ‘12px‘,
	                margin: ‘3px‘
		    	}
		    }
		};
	   return commonChartObj ;
}
    

       二、 对象数组与结构转化

       通常, 从服务端后台返回的数据结构是对象数组, 要使用基本接口来绘制, 就需要进行数据结构转化。 因此, 在基本接口之上, 可以构建一个高层接口, 见如下代码所示。   

/**
 * 创建柱状图(针对对象数组的高层接口)
 * @param chartDivName  用来绘制柱状图的 DIV-ID 值
 * @param chartData     对象数组
 *                      categories: [‘c1‘, ‘c2‘, ..., ‘Cn‘]
 *                      data:
 *                      [{‘field1‘: ‘v11‘, ‘field2‘: ‘v12‘, ..., ‘fieldN‘: ‘v1N‘},
 *                       {‘field1‘: ‘v21‘, ‘field2‘: ‘v22‘, ..., ‘fieldN‘: ‘v2N‘},
 *                       ..., 
 *                       {‘field1‘: ‘vN1‘, ‘field2‘: ‘vN2‘, ..., ‘fieldN‘: ‘vNN‘}]
 * @param chartConfig   柱状图全局配置
 *                       title: 图表标题
 *                       categoryField: 分组字段
 *                       groupField: 用于创建 legend 的分组字段
 *                       valueField: 用于显示 Y 轴的字段
 * @returns
 */
function generateColumnChartHighLevel(chartDivName, chartData, chartConfig) {
    
	var groupField = chartConfig.groupField;
	var valueField = chartConfig.valueField;
	var categoryField = chartConfig.categoryField;
	var categories = chartData.categories;
	
    var groupedChartData = groupByField(chartData.data, groupField);
    
    var series = [];
    
	// 在同一坐标中绘制多个曲线图
	for (var i=0; i< groupedChartData.length; i++) {
		var groupName = groupedChartData[i][groupField];
		var groupData = groupedChartData[i][‘data‘];
		
		var fieldData = [];
		for (var k=0; k < groupData.length; k++) {
			// 每个分类的值必须与相应的分类对应, 应对这样的情况
			// 对于每个 groupField, 并不是所有 categories 都有值, 可以通过测试例子看出来
			// 苹果在 Q3 对应的值是缺失的, 香蕉在 Q2 对应的值是缺失的 
			var categoryPosition =  getCategoryPosition(categories, groupData[k][categoryField]);
			if (categoryPosition != -1) {
				fieldData[categoryPosition] = groupData[k][valueField];
			}
		}
		for (var j=0; j < categories.length; j++) {
			// 缺失值填充
			if (fieldData[j] == null) {
				fieldData[j] = 0;
			}
		}
		var subseries = {
    		name: groupName,
    		data: fieldData,
    	};
		series.push(subseries);
	}
	
	var data = {};
    data.categories = categories;
    data.series = series;
	generateColumnChart(chartDivName, data, chartConfig);
	
}


/**
 * 检测 value 在 categories 中的位置
 * @param categories
 * @param value
 */
function getCategoryPosition(categories, value) {
	for (var index=0; index < categories.length; index++) {
		if (categories[index] == value) {
			return index;
		}
	}
	return -1;
}


/**
 * 将指定 chartData 数据按照指定字段的值分类
 * eg. [{‘timestamp‘: ‘time0‘, cpu: ‘0‘, sys: ‘15‘, usr: ‘20‘}, {‘timestamp‘: ‘time0‘, cpu: ‘1‘, sys: ‘16‘, usr: ‘21‘},
 *      {‘timestamp‘: ‘time1‘, cpu: ‘0‘, sys: ‘20‘, usr: ‘13‘}, {‘timestamp‘: ‘time1‘, cpu: ‘1‘, sys: ‘18‘, usr: ‘10‘}]
 * 转换为 [{ cpu:‘0‘, data: [{‘timestamp‘: ‘time0‘, cpu: ‘0‘, sys: ‘15‘, usr: ‘20‘}, {‘timestamp‘: ‘time1‘, cpu: ‘0‘, sys: ‘20‘, usr: ‘13‘}] } ,
 *       { cpu:‘1‘, data: [{‘timestamp‘: ‘time0‘, cpu: ‘1‘, sys: ‘16‘, usr: ‘21‘}, {‘timestamp‘: ‘time1‘, cpu: ‘1‘, sys: ‘18‘, usr: ‘10‘}] }] 
 */
var groupByField = function(chartDataGathered, fieldName) {
	var fieldDataMappingArray = [];
	var fieldData = {};
	var i=0, num = (chartDataGathered == null ? 0 : chartDataGathered.length);
	for (i=0; i<num; i++) {
		var fieldValue = chartDataGathered[i][fieldName];
		fieldData = obtainFieldData(fieldDataMappingArray, fieldName, fieldValue);
		if (fieldData == null) {
			fieldData = {};
			fieldData[fieldName] = fieldValue;
			fieldData[‘data‘] = [];
			fieldDataMappingArray.push(fieldData);
		}
		fieldData[‘data‘].push(chartDataGathered[i]);
	}
	return fieldDataMappingArray;
}


/**
 * 在 fieldDataMappingArray 中检测是否有 fieldName = fieldValue 的对象, 若有则返回; 若没有则返回 null
 * @param fieldDataMappingArray [{‘fieldName‘: ‘fieldValue1‘, ‘data‘:[]}, {‘fieldName‘: ‘fieldValue2‘, data: []}]
 * @param fieldName the name of field
 * @param fieldValue the value of field
 */
var obtainFieldData = function(fieldDataMappingArray, fieldName, fieldValue) {
	var k=0, dataArrayLength = (fieldDataMappingArray == null ? 0 : fieldDataMappingArray.length);
	var fieldData = {};
	var existFieldData = {};
	if (dataArrayLength == 0) {
		return null;
	}
	
	for (k=0; k<dataArrayLength; k++) {
		existFieldData = fieldDataMappingArray[k];
		if (existFieldData[fieldName] == fieldValue) {
			return existFieldData;
		}
	}
	return null;
}

        三、 使用接口     

<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
		<title>highcharts 绘图示例</title>
        <script src="jquery-1.10.1.min.js"></script>
        <script src="highcharts.js"></script>
		<script src="draw_highcharts.js"></script>

        <script type="text/javascript">
		    
			$(document).ready(function() {

				 /**
				   * 一个用于测试基本接口的示例
				   * @param chartDivId
				   */
				function testGenerateColumnChart(chartDivId) {
					var categories = [‘2013-11‘, ‘2013-12‘, ‘2014-01‘];
					var series = [
						 { name: ‘苹果‘, data: [1500, 1300, 1200] },
						 { name: ‘桔子‘, data: [3500, 5000, 2500] },
						 { name: ‘香蕉‘, data: [2000, 1800, 1600] }
					];
					var data = {
						categories: categories, series: series	
					};
					var chartConfig = { title: ‘第四季度水果销量‘ };
					generateColumnChart(chartDivId, data, chartConfig);
			     }
			     testGenerateColumnChart(‘testBasicColumnchartdiv‘);		

				/**
				 * 测试绘制柱状图高层接口的测试例子
				 * @param chartDivId
				 */
				function testGenerateColChartHighLevel(chartDivId) {
					var data = [
						{ time: ‘Q1‘ , fruit: ‘苹果‘, sale: 1500 },             
						{ time: ‘Q1‘ , fruit: ‘桔子‘, sale: 1300 },
						{ time: ‘Q1‘ , fruit: ‘香蕉‘, sale: 1400 },
						{ time: ‘Q2‘ , fruit: ‘苹果‘, sale: 1500 }, 
						{ time: ‘Q2‘ , fruit: ‘桔子‘, sale: 1900 },
						{ time: ‘Q3‘ , fruit: ‘桔子‘, sale: 1700 },
						{ time: ‘Q3‘ , fruit: ‘香蕉‘, sale: 1800 }
					];
					
					var categories = [‘Q1‘, ‘Q2‘, ‘Q3‘];
					
					var chartData = {
						categories: categories,
						data: data
					};
					
					var chartConfig = {
						title: ‘季度水果销量‘,
						categoryField: ‘time‘,
						groupField: ‘fruit‘,
						valueField: ‘sale‘
					}
					generateColumnChartHighLevel(chartDivId, chartData, chartConfig);
                }
                testGenerateColChartHighLevel(‘testAdvancedColumnchartdiv‘);
                
			});
		
		
		</script>

		<style>
			body {
			    font-family: ‘微软雅黑‘, ‘宋体‘, ‘san-serif‘;
			}

			.chartdiv {
			    width: 90%;
                height: 250px;
			}
		</style>

	</head>

	<body>

		<div id="testBasicColumnchartdiv" class="chartdiv"></div>
        <div id="testAdvancedColumnchartdiv" class="chartdiv"></div>
	</body>
</html>
        

        四、 效果图

         highchart 绘制柱状图的方法与接口

        五、 小结

        要绘制柱状图, 需要对数据结构和算法有较好的掌握, 能够*地在各种数据结构中进行转换。通过此例, 是想再次说明了结构与算法在实际开发工作中的应用。 当然, 本文给出的代码并非是最优的, 作为一个基本的解法, 里面还是有很多可改进之处。 

 

highchart 绘制柱状图的方法与接口

上一篇:android------页面切换到传递数据


下一篇:在Virtualbox的XP系统下启用集成摄像头功能