数据可视化中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

目录
打赏
0
1
1
1
184
分享
相关文章
JS浮点数精度问题及高精度小数运算:BigNumber解决方案
JS浮点数精度问题及高精度小数运算:BigNumber解决方案
348 0
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
986 1
打造动态数据可视化:JavaScript与AI的完美结合
在快速发展的技术世界中,Java作为广泛应用的编程语言,持续占据重要地位。本文探讨如何将AI技术,如DeepSeek,融入Java高级应用开发,实现智能代码生成、优化与自动化测试,提升开发效率和代码质量。AI通过分析大量代码库,自动生成高质量代码片段,减少重复劳动,并提出优化建议,帮助开发者编写更高效、安全的代码。未来,AI将进一步推动Java开发智能化,降低开发门槛,助力创新。
打造动态数据可视化:JavaScript与AI的完美结合
本文介绍如何通过JavaScript和AI技术实现动态数据可视化,以实时股票数据为例。使用JavaScript动态更新网页内容,Chart.js绘制股票价格走势图,并通过DeepSeek API进行趋势预测。用户输入股票代码后,网页展示历史价格并预测未来走势,增强用户体验。结合AI技术,不仅提升网页功能性,还为用户提供智能化的数据洞察。
使用D3.js进行数据可视化的探索与实践
【6月更文挑战第2天】本文探讨了D3.js在数据可视化中的应用,介绍了D3.js作为JavaScript库的特性,包括数据驱动、灵活性和兼容性。实践中,涉及数据准备、创建SVG容器、数据绑定与绘制、交互与动画以及样式美化。D3.js使开发人员能高效创建动态、交互式图表,适用于多平台和设备。未来,随着数据可视化技术进步,D3.js的应用前景广阔。
除了 Generator 函数,还有哪些 JavaScript 异步编程解决方案?
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作,以实现高效、可读和易于维护的代码。
构建高效的数据可视化仪表板:D3.js与React的融合之道
【10月更文挑战第25天】在数据驱动的时代,将复杂的数据集转换为直观、互动式的可视化表示已成为一项至关重要的技能。本文深入探讨了如何结合D3.js的强大可视化功能和React框架的响应式特性来构建高效、动态的数据可视化仪表板。文章首先介绍了D3.js和React的基础知识,然后通过一个实际的项目案例,详细阐述了如何将两者结合使用,并提供了实用的代码示例。无论你是数据科学家、前端开发者还是可视化爱好者,这篇文章都将为你提供宝贵的洞见和实用技能。
121 5
数据可视化进阶:D3.js在复杂数据可视化中的应用
【10月更文挑战第26天】数据可视化是将数据以图形、图表等形式呈现的过程,帮助我们理解数据和揭示趋势。D3.js(Data-Driven Documents)是一个基于JavaScript的库,使用HTML、SVG和CSS创建动态、交互式的数据可视化。它通过数据驱动文档的方式,将数据与DOM元素关联,提供高度的灵活性和定制性,适用于复杂数据的可视化任务。 示例代码展示了如何使用D3.js创建一个简单的柱状图,展示了其基本用法。D3.js的链式调用和回调函数机制使代码简洁易懂,支持复杂的布局和交互逻辑。
179 3
JS 异步解决方案的发展历程以及优缺点
本文介绍了JS异步解决方案的发展历程,从回调函数到Promise,再到Async/Await,每种方案的优缺点及应用场景,帮助开发者更好地理解和选择合适的异步处理方式。
js防抖函数返回值问题解决方案
本文介绍了如何在JavaScript中创建一个带有返回值的防抖函数,通过结合Promise来实现。这种防抖函数可以在事件触发一定时间后再执行函数,并能处理异步操作的返回值。文章提供了防抖函数的实现代码和如何在实际项目中使用该防抖函数的示例。
70 1

热门文章

最新文章