使用 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 = $('#&