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

最新推荐文章于 2022-11-07 17:41:35 发布

揽峰moc

最新推荐文章于 2022-11-07 17:41:35 发布

阅读量223

点赞数

分类专栏： highcharts-图表工具

本文链接：https://blog.csdn.net/big1989wmf/article/details/84471944

版权

highcharts-图表工具专栏收录该内容

1 篇文章 0 订阅

订阅专栏

//数据处理-成功
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

         }]
     });
}