本文主要是介绍使用 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 = $('#&这篇关于使用 highchart 绘制柱状图的通用方法与接口的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
