使用highcharts,本处使用了column柱形图,较简单

//数据处理-成功
function dealSuccessBySectionId(data){
	//画表格
	 var htmlStr = "";
     htmlStr += "<table class='tab-list' width='99%'>";
     htmlStr += "<thead>";
     htmlStr +="<tr class='list-header'>"
		+"<td width='5%'>序号</td>"
		+"<td width='34%'>版块名称</td>"
		+"<td width='22%'>发帖量</td>"
		+"<td width='22%'>回帖量</td>"
		+"<td width='22%'>点击量</td>"
		+"</tr>";
     htmlStr += "</thead>";
     htmlStr += "<tbody>";
     
     for (var i = 0; i < data.length; i++) {
         htmlStr += "<tr>";
         htmlStr += "<td>" + (i+1) + "</td>"
			+ "<td>"+ data[i].tsb.sectionName + "</td>"
			+ "<td>"+ data[i].ftl+ "</td>"
			+"<td>"+data[i].htl+"</td>"
			+"<td>"+ data[i].djl+ "</td>";
         htmlStr += "</tr>";
     }
     if(data.length==0){
     	htmlStr += "<tr style='text-align: center'><td colspan='6'><font color='#cd0a0a'>"+ '暂无记录' + "</font></td></tr>";
	}
     htmlStr += "</tbody>";

     htmlStr += "</table>";
     $("#btab2").html(htmlStr);
     //画图
     var sectionNameHtml=new Array(data.length);//各版块
     var ftHtml=new Array(data.length);//发帖量
     var htHtml=new Array(data.length);//回帖量
     var djHtml=new Array(data.length);//点击量
     for (var i = 0; i < data.length; i++) {
    	 sectionNameHtml[i]=data[i].tsb.sectionName;
    	 ftHtml[i]=data[i].ftl;
    	 htHtml[i]=data[i].htl;
    	 djHtml[i]=data[i].djl;
    	 
     }
     alert(sectionNameHtml);
     alert(ftHtml);
     alert(htHtml);
     alert(djHtml);
     $('#container').highcharts({
         chart: {
             type: 'column'
         },
         title: {
             text: '各版块发帖、回帖、点击量'
         },
         xAxis: {
             categories: sectionNameHtml
         },
         yAxis: {
             min: 0,
             title: {
                 text: '累计(次)'
             }
         },
         tooltip: {
             headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
             pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                 '<td style="padding:0"><b>{point.y:.1f} 次</b></td></tr>',
             footerFormat: '</table>',
             shared: true,
             useHTML: true
         },
         plotOptions: {
             column: {
                 pointPadding: 0.2,
                 borderWidth: 0
             }
         },
         series: [{
             name: '发帖量',
             data: ftHtml
 
         }, {
             name: '回帖量',
             data: htHtml
 
         }, {
             name: '点击量',
             data: djHtml
 
         }]
     });
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值