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


相关推荐

  • 再见PowerDesigner,这款国人开源的数据库设计工具Chiner真香

    再见PowerDesigner,这款国人开源的数据库设计工具Chiner真香再见PowerDesigner,这款国人开源的数据库设计工具Chiner真香当我们在项目开发初期时,往往需要设计大量的表,此时使用数据库设计工具就会比较高效!今天给大家推荐一款国人开源的数据库设计工具chiner,界面漂亮,功能强大,希望对大家有所帮助!回顾PowerDesigner相信平时工作中,大家或多或少会使用PowerDesigner来设计数据库,感觉这款工具界面有点古老,界面看着就具年代感,有时候用起来也比较重,来看下之前使用它设计数据库的效果。最近体验了一把chiner,设计数据库

    2022年7月27日
    9
  • Vue学习之v-model指令

    Vue学习之v-model指令Vue学习之v-model指令

    2022年4月23日
    57
  • LoadRunner教程(18)-LoadRunner 图表合并[通俗易懂]

    LoadRunner教程(18)-LoadRunner 图表合并[通俗易懂]分析图合并一、分析图合并原理选择view-&amp;gt;mergegraphs,弹出所示对话框1、选择要合并的图。选择一个要与当前活动图合并的图,注意这里只能选择X轴度量单位相同的图。2、选择合并类型。1)叠加:查看共用同一X轴的两个图的内容。合并图左侧的Y轴显示当前图的Y轴值,右边的Y轴显示合并进来的图的Y轴值,如图所示2)平铺:在平铺布局查看,共用同一个X轴,合…

    2022年5月10日
    48
  • QThread 的使用「建议收藏」

    QThread 的使用「建议收藏」文章目录1.引言2.QThread文档3.QThread::run和QObject::connect4.QObject::moveToThread()5.使用场景对于子类化Thread的方式对于workermovetothread的方式1.引言你会用QThread吗?有几种使用方式?这几种使用方式都在何种场景下使用?有什么需要注意的地方吗?2.QThr…

    2022年5月28日
    31
  • centos查看端口占用情况和开启端口命令_查看80端口占用情况

    centos查看端口占用情况和开启端口命令_查看80端口占用情况Centos查看端口占用情况命令,比如查看80端口占用情况使用如下命令:lsof-itcp:80列出所有端口netstat-ntlp结束进程:kill进程代码

    2022年7月27日
    38
  • AliDDNS 阿里云动态域名服务 实用工具

    AliDDNS 阿里云动态域名服务 实用工具v3.7.1.11、增加系统托盘图标状态更新功能:红色-获取WAN口IP或者获取域名绑定IP失败。黄色-获取成功,但WAN口IP和域名绑定IP不一致。绿色-获取成功,WAN口IP和域名绑定IP一致。灰色-WAN口网络不通。2、修改代码和窗体标签刷新BUG。3、修复系统托盘图标刷新BUG。…

    2022年5月2日
    36

发表回复

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

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