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