使用HighCharts绘制bar形柱状图

需引入highcharts.js文件

http://www.52wulian.org/highcharts_api/ （主要API）

http://www.highcharts.com/demo/?example=bar-basic&theme=grid （各种图形）

$(function() {

chart = new Highcharts.Chart({

chart: {

renderTo: 'comperuntype', ---id为 [b]comperuntype 的 DIV--

defaultSeriesType: 'bar',

},

title: {
----------标题-------

text: '',

x: -20 //center

},

credits: {
---------副标题--------

enabled : true,

href : "#",

text : "不合格批次"

},

exporting :{ -----------导出-------------

enabled:true,

filename:"productinfo",

type:"image/png",

url:"http://export.highcharts.com",

width:800

},

xAxis: { //x轴标签

title: {

text: null,

},

categories: proNameArr, ------------数组格式--------

},

yAxis: { //y轴标签

min: 0, //最小值为0

tickInterval: 2.5, //自定义刻度

title: {

text: null,

},

labels: {

overflow: 'justify'

}

},

plotOptions: { //配置数据使其点显示信息

----------柱形图-----------

bar : {

dataLabels: {enabled: true},

enableMouseTracking: true

}

--------圆形图------------- chart.series[0].setData(unquNameArr); //圆形图数据也是数组类型，可这样添加

pie: {

size:'80%',

borderWidth: 0,

allowPointSelect: true,

cursor: 'pointer',

dataLabels: {

enabled: true,

color: '#000',

connectorColor: '#999', //设置数据域扇形区的连接线的颜色

//distance: -32,//通过设置这个属性，将每个小饼图的显示名称和每个饼图重叠

style: {

fontSize: '12px',

},

formatter: function(index) {

return '<span style="color:black;>' + this.point.name +Highcharts.numberFormat(this.percentage, 2) + ' %';

}

},

},

series: [{

name: '批次',

data: proCountArr -----------数组格式-------

}]

});

--------------------数据可从后台取得---------------------------------

<c:forEach items="${list}" var="dft">

proNameArr.push('${dft.industryName}');

proCountArr.push(${dft.orders});

</c:forEach>

<c:forEach items="${unquaList}" var="un">

<c:if test="${un.parentId==1}">

unquNameArr.push(['${un.unName}',${un.orders/totalItemOrders*100}]);

</c:if>

</c:forEach> [/b]