highchart 图标技术
2017-02-13 22:57
267 查看
1.部分html文件
2.js 文件
3.效果图
<div region="center" style="width: 100%; height: 100%;"> <table id="t_auclotBlack" style="height: 100%; width: 100%;"></table> </div>
2.js 文件
function aucLotAgencyDealreport(begin,end,regionFlag,agencyId){ var xdata = []; var aucLotCount=[];//拍品件数 var aucLotDealCount=[];//成交件数 var factCount=[];//实际成交数量 var regretCount=[];//悔拍次数 var shootnumber=[];//上拍次数 var sellnumber=[];//变卖次数 var aucLotDealnumber=[];//拍卖成交次数 var firstnumber=[];//优先拍卖成交次数 var sellDealnumber=[];//变卖成交次数 $.ajax({ type: 'get', dataType: 'json', async: false, data: {"beginTime":begin,"endTime":end, "regionFlag":regionFlag,"agencyId":agencyId}, url: parent.baseUrl+"report/findAucAgencyDealCount", success: function (result) { var json=result; for(var i=0;i<json.length;i++){ xdata.push(json[i].aucagencyName); aucLotCount.push(parseInt(json[i].aucLotCount)); aucLotDealCount.push(parseInt(json[i].aucLotDealCount)); factCount.push(parseInt(json[i].factCount)); regretCount.push(parseInt(json[i].regretCount)); shootnumber.push(parseInt(json[i].shootnumber)); sellnumber.push(parseInt(json[i].sellnumber)); aucLotDealnumber.push(parseInt(json[i].aucLotDealnum_ber)); firstnumber.push(parseInt(json[i].firstnumber)); sellDealnumber.push(parseInt(json[i].sellDealnumber)); } getHighcharts(xdata,aucLotCount,aucLotDealCount,factCount,regretCount,shootnumber,sellnumber,aucLotDealnumber,firstnumber ,sellDealnumber); } }); } function getHighcharts(xdata,aucLotCount,aucLotDealCount,factCount,regretCount, shootnumber,sellnumber,aucLotDealnumber,firstnumber,sellDealnumber){ var chart =new Highcharts.chart('container', { credits: { enabled: false, //去掉版权信息,就是右下角显示的highchars的网站链接 也可以显示成自己的链接,具体请搜索api }, chart: { type: 'column' }, title: { text: '<span style="font-size:24px;font-weight:bolder;color:Black;">司法机构上拍统计</span>', }, subtitle: { text: '上拍统计' }, legend: { align: 'right', verticalAlign: 'middle', layout: 'vertical' }, tooltip:{ valueSuffix: '数量', formatter:function(){ return '<b>'+this.series.name+'</b>:'+this.y; }//,this.x Highcharts.dateFormat("%Y年%m月%e日")+this.x+'<br>'+ }, xAxis: { type:'date', categories:xdata, //gridLineWidth: 5, dateTimeLabelFormats:{ year: '%Y', month: '%b \ %y', day: '%e. %b' }, }, yAxis: { allowDecimals: false, title: { text: '数量' } }, plotOptions: { series: { //pointPadding:0.2, groupPadding:0.2 }, column: { pointWidth:15 } }, series: [{ name: '拍品件数', data: aucLotCount }, { name: '成交件数', data: aucLotDealCount }, { name: '实际成交数量', data: factCount }, { name: '悔拍件数', data: regretCount }, { name: '上拍次数', data: shootnumber }, { name: '变卖次数', data: sellnumber }, { name: '拍卖成交次数', data: aucLotDealnumber }, { name: '优先拍卖成交次数', data: firstnumber }, { name: '变卖成交次数', data: sellDealnumber }], responsive: { rules: [{ condition: { maxWidth: 500 }, chartOptions: { legend: { align: 'center', verticalAlign: 'bottom', layout: 'horizontal' }, yAxis: { labels: { align: 'left', x: 0, y: -5 }, title: { text: null } }, subtitle: { text: null }, credits: { enabled: false } } }] } }); }
3.效果图
相关文章推荐
- highchart动态获取json数据,更新图标显示
- highcharts去掉右下角highchart.com和右上角的图标(三个小横杆)
- jquery图表范例及推荐highchart+sparkline
- Highchart图形报表
- highChart另类使用及一些属性
- highchart动态生成图形
- PHP使用HighChart生成股票K线图详解
- SpagoBI 教程 Lesson 3: Highchart Dashboards
- 基于Highchart制作仪表图和柱状图
- HighChart
- 【SSH网上商城项目实战29】使用JsChart技术在后台显示商品销售报表
- HighChart学习-更新数据data Series与重绘
- echarts和highchart的区别
- 模拟从后台取数据,用highchart画图
- 最近写的一个图标互换工具(技术+部分源码)
- achartengine图标框架的使用心得
- highchart学习网址
- 几个非常好的图标引擎helloChart ,PMChart
- highchart使用
- Highchart :tooltip工具提示