JavaScript像数组添加元素并排序「建议收藏」

JavaScript像数组添加元素并排序「建议收藏」最近用jscharts做图如上图,柱形排列是没有规律的,将它做出如下调整因为jscharts做表,是使用数组存储数据//准备数据varmyData=newArray([‘Asia’,437,520],[‘Europe’,322,390],[‘NorthAmerica’,233,286],[‘LatinAmerica’,110,162],[‘Afric

大家好,又见面了,我是你们的朋友全栈君。

最近用jscharts做图
这里写图片描述
如上图,柱形排列是没有规律的,将它做出如下调整
这里写图片描述

因为jscharts做表,是使用数组存储数据

//准备数据
var myData = new Array(['Asia', 437, 520], ['Europe', 322, 390], ['North America', 233, 286], ['Latin America', 110, 162], ['Africa', 34, 49], ['Middle East', 20, 31], ['Aus/Oceania', 19, 22]);
//初始化JSChart
var myChart = new JSChart('graph', 'bar');
//注入数据
myChart.setDataArray(myData);

所以我们只需要对数组进行排序即可
因为在使用中,我们的数据肯定是从后台生成传到前台来的,所有一起介绍动态向数组中添加数据

unshift:将参数添加到原数组开头,并返回数组的长度

var a = [1,2,3,4,5]; 
var b = a.unshift(-2,-1); //a:[-2,-1,1,2,3,4,5] b:7 

push:将参数添加到原数组末尾,并返回数组的长度

var a = [1,2,3,4,5]; 
var b = a.push(6,7); //a:[1,2,3,4,5,6,7] b:7 

数组排序(按首字母排序)

<script type="text/javascript"> var arr = new Array(6) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" arr[3] = "James" arr[4] = "Adrew" arr[5] = "Martin" document.write(arr + "<br />") document.write(arr.sort()) </script>
//输出
//George,John,Thomas,James,Adrew,Martin
//Adrew,George,James,John,Martin,Thomas

也可以自定义排序规则

<script type="text/javascript"> function sortNumber(a,b) { 
     return a - b } var arr = new Array(6) arr[0] = "10" arr[1] = "5" arr[2] = "40" arr[3] = "25" arr[4] = "1000" arr[5] = "1" document.write(arr + "<br />") document.write(arr.sort(sortNumber)) </script>
//输出
//10,5,40,25,1000,1
//1,5,10,25,40,1000

使用拍过序的数组,做出的图效果就会和第二张图一样了

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/134125.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 字符串非空判断:StringUtils中 isNotEmpty 和isNotBlank的区别

    字符串非空判断:StringUtils中 isNotEmpty 和isNotBlank的区别在项目中,我们用的最多的是StringUtils中的非空判断方法,相信大部分人都用过IsNotEmpty或者isEmpty方法今天我们要提到的,是isNotBlankpublicstaticbooleanisNotEmpty(Stringstr)判断某字符串是否非空,等于!isEmpty(Stringstr),这里不能排除空格字符下面是示例:Stri

  • 为什么要分用户态和内核态_会导致用户进程用户态到内核态

    为什么要分用户态和内核态_会导致用户进程用户态到内核态在计算机系统中,通常运行着两类程序:系统程序和应用程序,为了保证系统程序不被应用程序有意或无意地破坏,为计算机设置了两种状态:系统态(也称为管态或核心态),操作系统在系统态运行——运行操作系统程序 用户态(也称为目态),应用程序只能在用户态运行——运行用户程序在实际运行过程中,处理机会在系统态和用户态间切换。相应地,现代多数操作系统将CPU的指令集分为特权指令和非特权指令两类。1)…

  • android10锁屏时钟样式,三星s10息屏时钟[通俗易懂]

    android10锁屏时钟样式,三星s10息屏时钟[通俗易懂]三星s10息屏时钟设置软件相当的方便强大,是不是设置息屏时钟太麻烦了,或者横竖屏总是错乱不尽人意?不用再在网上找各种攻略啦,这款软件可以直接帮助你修改息屏时钟,一键操作设置即可!同时这款软件中还有这更多的炫酷功能,图标壁纸时钟主题等等自定义和制作功能相当的强大!喜欢的朋友们不要错过哦!赶快下载三星s10息屏时钟开始体验吧!三星s10息屏时钟介绍三星s10息屏时钟软件app是一款提取版三星s10息屏…

  • 为什么安装的软件不在桌面上_手机360桌面设置

    为什么安装的软件不在桌面上_手机360桌面设置成功在RedFlagLinux5.0桌面版安装oralce10(转)[@more@]  本文中描述的步骤可能有些不是必须的,但笔者没有进一步验证,故将安装过程中的所有步骤均列出在此。1.安装RedflagLinux…

  • 云计算,大数据,物联网三者的区别与联系方法_物联网与云存储的关系

    云计算,大数据,物联网三者的区别与联系方法_物联网与云存储的关系

  • C语言实现哈希表_哈希表c语言代码

    C语言实现哈希表_哈希表c语言代码这是一个简单的哈希表的实现,用c语言做的。哈希表原理这里不讲高深理论,只说直观感受。哈希表的目的就是为了根据数据的部分内容(关键字),直接计算出存放完整数据的内存地址。试想一下,如果从链表中根据关键字查找一个元素,那么就需要遍历才能得到这个元素的内存地址,如果链表长度很大,查找就需要更多的时间.void*list_find_by_key(list,key){for(p=list;p!=NULL;p=p->next){if(p->key=.

    2022年10月19日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号