使用 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>

        

        四、 效果图

         



        五、 小结

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