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

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

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

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

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 2021.9idea激活码永久【最新永久激活】

    (2021.9idea激活码永久)2021最新分享一个能用的的激活码出来,希望能帮到需要激活的朋友。目前这个是能用的,但是用的人多了之后也会失效,会不定时更新的,大家持续关注此网站~https://javaforall.net/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~1S…

    2022年3月27日
    52
  • idea2022激活教程,永久激活!(附激活码)[最新免费获取]2022.02.25

    (idea2022激活教程,永久激活!(附激活码))2021最新分享一个能用的的激活码出来,希望能帮到需要激活的朋友。目前这个是能用的,但是用的人多了之后也会失效,会不定时更新的,大家持续关注此网站~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html…

    2022年4月1日
    1.0K
  • 用户态和内核态的简单理解「建议收藏」

    用户态和内核态的简单理解「建议收藏」文章目录linux基础系统调用和库函数的区别什么是用户态和内核态用户态和内核态的相互转换linux基础linux的kernel内核外是系统调用,系统调用外是shell、库函数系统调用和库函数的区别内核:屏蔽了调用各硬件资源的细节系统调用:内核提供给用户调用的接口,但系统调用的可移植性差移植性差的原因:windows、linux内核的系统调用是不同的,比如:同一个功能提供给用户的函数名、参数都不相同,会出现从一个系统移植到另一个系统无法正常运行。库函数:为了解决系统调用移植新差的问题,同时封

    2022年9月18日
    3
  • spring c3p0连接池配置 com.mchange.v2.c3p0.combopooleddatasource

    spring c3p0连接池配置 com.mchange.v2.c3p0.combopooleddatasource3    30    1000    false    Test

    2022年6月8日
    25
  • 反射型xss偷取cookie(本地验证)

    反射型xss偷取cookie(本地验证)原理反射型xss为危害之一就是:用户在登录的情况下点击了黑客发送的链接,就会导致该网址的cookie泄露,导致帐号被黑客登录。

    2022年5月10日
    50
  • visual studio code使用方法_vscode自定义代码块

    visual studio code使用方法_vscode自定义代码块snippet,也即代码片,指的是能够帮助输入重复代码模式,比如循环或条件语句,的模板。本文即旨于详实地介绍如何在vscode中设置snippet。

    2022年10月2日
    1

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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