Highcharts报表之柱状图
2012-02-23 15:36
162 查看
导入highcharts.js、highcharts.src.js、excanvas.compiled.js三个js文件,下面为js部分
body部分:
以上代码只写出了主要部分,并不能成功运行起来
var chart; function showHighCharts(data) { var options= { chart: { renderTo: 'container1',//对应div的id defaultSeriesType: 'column'//默认为柱状图 // type: 'column' }, title: { text: 'HighCharts Demo之柱状图',//设置标题栏名称 style: { margin: '10px 100px 0 0', // center it font: '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它是从数据库中查出来的值的列表, 是一个list for(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>
以上代码只写出了主要部分,并不能成功运行起来
相关文章推荐
- Highcharts报表 柱状图的编写代码
- 【Android】报表、线图、饼图、柱状图 (工具整理)
- 水晶报表生成柱状图
- 介绍一款强大牛比的js报表项目 highcharts
- highcharts(前端报表生成)
- highcharts绘制柱状图代码实例
- 【Android】报表、线图、饼图、柱状图 (工具整理)
- highcharts做柱状图与曲线图
- HighCharts之2D柱状图、折线图和饼图的组合图
- 教你使用HighCharts框架显示报表
- 项目经验:Highcharts绘制饼图、折线图、柱状图
- 报表展示组件Highcharts与Fusioncharts的对比
- jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
- 安卓报表MPAndroidChart之柱状图
- 扩展arcgis flex symbol 显示报表功能,显示饼状图和柱状图,非用infoSymbol实现(三)
- SSH综合项目实战(快递) -- day15 highcharts实现图形报表
- Highcharts(二) 基础柱状图 ajax动态刷新
- HighCharts柱状图显示百分比
- highCharts图形报表神器
- highcharts做柱状图与曲线图