数据可视化中javascript二维数组使用arr.slice实现换行换列排名的解决方案

简介: 数据可视化中javascript二维数组使用arr.slice实现换行换列排名的解决方案

数据可视化大屏中,常常使用到区域排名的情况,通常的多行同列名的容易排序输出;但是多行多同名列排名怎么解决呢?本案例就是javascript二维数组使用arr.slice实现换行换列排名的解决方案。


57c3d200135e4bf4ab1cc81e8373b770.png


演示效果


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

相关文章
|
6月前
|
监控 数据可视化 安全
如何使用webgl(three.js)实现煤矿隧道、井下人员定位、掘进面、纵采面可视化解决方案——第十九课(一)
three.js、webgl、3D煤矿隧道、三维井下人员定位、掘进面三维可视化、纵采面可视化、采集面可视化展示、设备检测、数字孪生、物联网3D、3d建筑、3d库房,bim管理系统
176 1
|
2月前
|
前端开发 JavaScript
前端JavaScript中异步的终极解决方案:async/await
在深入讨论 async/await 之前,我们需要了解一下 JavaScript 的单线程和非阻塞的特性。JavaScript 是单线程的,也就是说在任何给定的时间点,只能执行一个操作。然而,对于需要大量时间的操作(例如从服务器获取数据),如果没有适当的管理机制,这种单线程特性可能会导致应用程序的阻塞。为了解决这个问题,JavaScript 引入了回调函数和后来的 Promise,用来管理这些异步操作。
|
3月前
|
监控 前端开发 JavaScript
【面试题】聊聊 js 异步解决方案
【面试题】聊聊 js 异步解决方案
|
3月前
|
前端开发 JavaScript
【JavaScript】异步解决方案的发展历程
JavaScript是一种广泛使用的编程语言,用于开发Web应用程序。在Web开发中,异步编程是一种重要的技术,它允许在执行长时间运行的操作时不阻塞用户界面。随着JavaScript的发展,异步编程解决方案也在不断演进。本文将探讨JavaScript异步解决方案的发展历程、优缺点以及代码示例。
27 0
|
9月前
|
JavaScript 前端开发
Javascript用数据替换if或switch的解决方案
Javascript用数据替换if或switch的解决方案
55 0
|
6月前
|
前端开发 JavaScript
带你读《现代Javascript高级教程》二十九、异步的终极解决方案:async/await
带你读《现代Javascript高级教程》二十九、异步的终极解决方案:async/await
|
9月前
|
前端开发 JavaScript 数据可视化
javascript逐行显示数据及php实时输出前端内容后台保持继续运行的解决方案(setTimeout定时器、flush和ob_flush函数、安装进度展示)
javascript逐行显示数据及php实时输出前端内容后台保持继续运行的解决方案(setTimeout定时器、flush和ob_flush函数、安装进度展示)
134 0
|
9月前
|
JavaScript
js去除二维对象数组重复值的解决方案
js去除二维对象数组重复值的解决方案
61 0
|
9月前
|
JavaScript 前端开发
javascript:将数组转为字符串通过判断包含字段进行状态判断的解决方案
javascript:将数组转为字符串通过判断包含字段进行状态判断的解决方案
31 0
|
9月前
|
JavaScript 前端开发 数据格式
javascript判断多维数组是否包含某字段的解决方案
javascript判断多维数组是否包含某字段的解决方案
66 0