<script type="text/javascript" src="Scripts/jquery-1.7.min.js"></script>
<script type="text/javascript" src="Scripts/highcharts/highcharts.js"></script> <script type="text/javascript" src="Scripts/highcharts/themes/grid.js"></script>
//renderTo 要显示的ID //title_text 标题 //subtitle 副标题 //yAxis_text Y轴文字 //tip_text 提示文字 //series_name 分组的名称 //series_data 数据 function drawColumn(renderTo, title_text, subtitle, yAxis_text,tip_text,series_name, series_data) { $(document).ready(function () { chart = new Highcharts.Chart({ chart: { renderTo: renderTo, //放置图表的容器 type: 'column' //图表类型 }, title: { //主标题 text: title_text }, subtitle: { //副标题 text: subtitle }, credits: { enabled: false //禁用名片 }, exporting: { enabled: false //禁用导出,打印图片按钮 }, xAxis: { categories: [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月' ], labels: { //rotation: -45,//控制斜体 align: 'right', style: {font: 'normal 10px 宋体'}, x:5 } }, yAxis: { min: 0, title: { text: yAxis_text } }, legend: { layout: 'vertical', backgroundColor: '#FFFFFF', align: 'left', verticalAlign: 'top', x: 100, y: 70, floating: true, shadow: true, enabled:false//禁用图例 }, tooltip: { formatter: function () { return '' + this.x + ': ' + Highcharts.numberFormat(this.y)+tip_text; } }, plotOptions: { column: { cursor: 'pointer', //allowPointSelect:true, point: { events: { click: function() { //window.open(); tt(this.x+1);//点击柱子跳转URL } } }, pointPadding: 0.2, borderWidth: 0, pointWidth:15 //显示的宽度 } }, series: [{ name: series_name, data: series_data, //逗号不要多余 dataLabels:{ //在柱子的顶部显示值 enabled:true, formatter:function(){ if(this.y>0){ return Highcharts.numberFormat(this.y); } } } }] }); }); } </script> <script type="text/javascript"> function tt(month) { window.location.href = "SearchCer.aspx?month=" + month; } </script>
如果你想对一个柱子使用不同的颜色的话:将series中的 data格式改成这样: [{"color":"red","y":49.9}],加入一个color属性控制它的颜色