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


相关推荐

  • 日期时间控件[通俗易懂]

    日期时间控件[通俗易懂]日期时间控件开发软件使用到日期时间控件的地方很多,但是很多时候Html5自带的时间控件无法满足开发的需要,所以使用这种时间控件完全没有问题引用很多时候我们开发引用别人的控件时候,发现老是出现错误,是因为我们引用出现错误,我在使用日期时间控件的时候也出现了这样的问题所以文件一点要放正确,多的浪费,少了要命,请把以下标注的文件全部放入到引用的文件夹里面…

    2022年5月24日
  • npm 更新node 版本「建议收藏」

    npm 更新node 版本「建议收藏」mac系统需要切换到root用户sudo-u查看版本npm-vnode-v更新npm版本npminstall-gnpm更新node版本先清除npm缓存:npmcacheclean-f 然后安装n模块:npminstall-gn安装n时报错解决方案如何升级nodejs版本安装n模块报错npmERR!notsupU…

    2022年11月2日
  • android registerreceiver() 参数,android – 如何使用registerReceiver方法?

    android registerreceiver() 参数,android – 如何使用registerReceiver方法?我想使用动态注册的BroadcastReceiver有一个Activity的引用,所以它可以修改其UI。我使用Context.registerReceiver()方法,但接收器的onReceive()方法从未调用。这里是显示问题的示例代码:packagecom.example;importandroid.app.Activity;importandroid.app.IntentService…

    2022年9月12日
  • PAT乙级题目对应知识点分类梳理

    PAT乙级题目对应知识点分类梳理PAT乙级的90道题的知识点与对应的题号整理如下,便于做专项练习和巩固!1、字符串函数考察字符串相关知识,如逆转、字母与数字的判断与转化、字符串拼接、字符串比较题号:1002、1006、1009、1014、1021、1024、1031/1039、1042、1043、/1048/1052/1054/1058/1067/1079、1081/1084/1086、2、STL容器考察ST…

    2022年5月4日
  • asp.net中的Gridview控件添加序号列

    asp.net中的Gridview控件添加序号列asp.net中的Gridview控件添加序号列

    2022年4月24日
  • 分布式事务解决方案之TCC(Hmily)「建议收藏」

    分布式事务解决方案之TCC(Hmily)「建议收藏」1什么是TCC事务TCC是Try、Confirm、Cancel三个词语的缩写,TCC要求每个分支事务实现三个操作:预处理Try、确认Confirm、撤销Cancel。Try操作做业务检查及资源预留,Confirm做业务确认操作,Cancel实现一个与Try相反的操作即回滚操作。TM首先发起所有的分支事务的try操作,任何一个分支事务的try操作执行失败,TM将会发起所有分支事务的Cancel操作,若try操作全部成功,TM将会发起所有分支事务的Confirm操作,其中Confirm/Cancel操作若执

    2022年5月11日

发表回复

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

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