Highcharts报表之柱状图

来源：互联网发布：三星oculus 软件下载编辑：程序博客网时间：2024/04/30 17:32

导入highcharts.js、highcharts.src.js、excanvas.compiled.js三个js文件，下面为js部分

var chart;function showHighCharts(data) {var options= {chart: {renderTo: 'container1',//对应div的iddefaultSeriesType: 'column'//默认为柱状图//type: 'column'},title: {text: 'HighCharts Demo之柱状图',//设置标题栏名称style: {margin: '10px 100px 0 0', // center itfont: 'normal 25px Verdana, sans-serif'//设置标题字体的样式}},xAxis: {categories: [ //设置X轴坐标值'<=30','31-60','61-120','>=121'],labels: {//X轴坐标值样式//rotation: -45,//align: 'right',style: { font: 'normal 14px Verdana, sans-serif'// color: 'white'}}},yAxis: {tickInterval: 5,//自定义刻度max: 100,//Y轴最大值title: {text: '百分數',//tickPixelInterval:10,margin: 50},plotLines: [{value: 0,width: 1,color: '#808080'}]},/* legend: {layout: 'vertical',backgroundColor: '#6E6E6E',align: 'right',style: {left: 'auto',right:'5px',top: '180px',bottom: 'auto'}}, */tooltip: {//鼠标放在图形上时的提示信息formatter: function() {                return '<b>'+ this.series.name +'</b><br/>'+this.x +': '+ this.y;}}};//下面的代码主要是为了构造形如以下的数据:/* [{name: 'BF',data: [150, 270, 120, 230, 300, 220, 250, 120, 100, 200, 90, 60]}, {name: 'LF',data: [230, 160, 150, 100, 290, 300, 200, 160, 500, 100, 86, 25]}, {name: 'TJ',data: [60, 90, 100, 200, 330, 120, 120, 300, 80, 200, 39, 10]}] */options.series = [];// data它是从数据库中查出来的值的列表, 是一个listfor(var i=0; i<data.length; i++){options.series[i] = {                   name: data[i].WEEK,       //         type: 'column',                  data: [parseFloat(data[i].RL_30),parseFloat(data[i].RL_60),                         parseFloat(data[i].RL_120),parseFloat(data[i].RM_120)]               };}chart = new Highcharts.Chart(options);}function getDataForHighcharts() {var data="";// 此处异步请求数据库中的数据，这样可以只刷新报表显示部分// data=...........showHighCharts(data);}

body部分：

<input type="button" value="显示图形" onclick="getDataForHighcharts()"><div id="container1" align="center" style="height: 470px; margin: 0 0 0 0"></div>

以上代码只写出了主要部分，并不能成功运行起来