数据可视化大屏中,常常使用到区域排名的情况,通常的多行同列名的容易排序输出;但是多行多同名列排名怎么解决呢?本案例就是javascript二维数组使用arr.slice实现换行换列排名的解决方案。
演示效果
JS核心代码
/*区县排名*/ function getCounty(user_city) { $.ajax({ type: "get", async: true, url: "api/api.php?act=getCounty&token=3cab7ce4142608c0f40c785b5ab5ca24", data: {user_city: user_city}, dataType: "json", success: function (res) { var data = res.data; var data1 = data.slice(0, 10); var data2 = data.slice(10, 20); if (data) { var platHtml1 = '', platHtml2 = ''; for (var i = 0; i < data1.length; i++) { platHtml1 += "<li><span>" + limitWords(data1[i].user_area, 3) + "</span><span>" + data1[i].total + "</span><span>" + (i + 1) + "</span></li>"; } for (var j = 0; j < data2.length; j++) { platHtml2 += "<li><span>" + limitWords(data2[j].user_area, 3) + "</span><span>" + data2[j].total + "</span><span>" + (j + 11) + "</span></li>"; } } /*渲染数据*/ $("#ranking1").html(platHtml1); $("#ranking2").html(platHtml2); }, error: function () { console.log("全省人员饼图:API INTERFACE ERROR"); } }); }
代码解析
- 统一API接口,一次性读取后台数据;
- 使用data.slice(0, 10),实现数据分组截取;
- 循环输入HTML;
- $(“#ranking1”).html(platHtml1),前端渲染;
@lockdata.cn