//数据处理-成功
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
}]
});
}
使用highcharts,本处使用了column柱形图,较简单
最新推荐文章于 2021-12-06 15:34:59 发布