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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • MetaMask使用教程

    MetaMask使用教程MetaMask 是一款在谷歌浏览器 Chrome 上使用的插件类型的以太坊钱包 该钱包不需要下载 只需要在谷歌浏览器添加对应的扩展程序即可 非常轻量级 使用起来也非常方便 1 Chrome 的安装既然是一款运行在谷歌浏览器 Chrome 上的插件 当然首先需要先安装 Chrome 了 读者可以进入官网 https www google co

    2025年10月20日
    4
  • netty拆包_拆包技巧

    netty拆包_拆包技巧面试官:讲一讲Netty粘包拆包

    2022年8月11日
    8
  • DLL注入

    DLL注入DLL注入DLL注入原理dll注入实现过程功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML图表FLowchart流程图导出与导入导出导入DLL注入原理在Windows操作系统中,运行的每一个进程都生活在自己的程序空间中(保护模式),每一个进程都认为自己拥有整个机器的控制权,

    2022年5月17日
    62
  • Mac OS使用技巧之十六:系统失去响应怎么办?[通俗易懂]

    Mac OS使用技巧之十六:系统失去响应怎么办?

    2022年2月2日
    58
  • android生成apk包出现Unable to add &quot;XXX&quot; Zip add failed问题

    android生成apk包出现Unable to add &quot;XXX&quot; Zip add failed问题

    2022年1月2日
    47
  • P2P技术和运用

    P2P技术和运用文章目录1.P2P技术1.1P2P技术优势2.P2P网络结构2.1组建P2P网络要解决的3个基本问题:2.2P2P网络类型:2.3集中式P2P网络2.3.1集中式P2P网络的特点2.3.2集中式P2P优缺点2.3.2.1优点2.3.2.2缺点2.4分布式非结构化P2P网络–Gnutella2.4.1洪泛算法:2.4.2Gnutella:2.4.3PureP2P特点:2.5结构化P2P网络2.5.1DHT的基本概念2.5.1.1DHT的特点2.5.1.2DHT应用举

    2022年6月19日
    21

发表回复

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

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