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


相关推荐

  • pytorch BatchNorm参数详解,计算过程

    pytorch BatchNorm参数详解,计算过程BatchNorm1d的参数:torch.nn.BatchNorm1d(num_features,eps=1e-05,momentum=0.1,affine=True,track_running_stats=True)

    2022年5月24日
    95
  • MCTS (Monte Carlo Tree Search)[通俗易懂]

    MCTS (Monte Carlo Tree Search)[通俗易懂]以下文章摘录自:《机器学习观止——核心原理与实践》京东:https://item.jd.com/13166960.html当当:http://product.dangdang.com/29218274.html(由于博客系统问题,部分公式、图片和格式有可能存在显示问题,请参阅原书了解详情)MCTS(MonteCarloTreeSearch)1.1MCTS概述在前面的学习中,我们分析了蒙特卡洛方法,本章节将为大家解开蒙特卡洛树搜索的“面纱”。虽…

    2022年6月22日
    25
  • BZOJ4873[Shoi2017]寿司餐厅——最大权闭合子图

    BZOJ4873[Shoi2017]寿司餐厅——最大权闭合子图

    2022年4月2日
    38
  • Tomcat的下载和安装教程,超级详细

    Tomcat的下载和安装教程,超级详细1、什么是Tomcat?tomcat是一个开源的轻量级Web应用服务器,在中小型系统和并发量小的场合下被普遍使用,是开发和调试Servlet、JSP程序的首选。最初由Sun公司的软件架构师詹姆斯·邓肯·戴维森开发,后来他帮助将其变为开源项目并由Sun公司贡献给Apache软件基金会。2、Tomcat的下载1)下载地址http://tomcat.apache.org/2)版本选择进入官网主页,看到左侧栏的download的下载目录,尽量不选择最新的版本,选择较为稳定的版本。目前最新的版本是

    2022年5月19日
    40
  • CSS伪类与伪元素「建议收藏」

    CSS伪类与伪元素「建议收藏」为什么要引入伪类与伪元素?css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说,伪类和伪元素是用来修饰不在文档树中的部分,比如,一句话中的第一个字母,或是列表中的第一个元素,又或者是鼠标悬停在某个超链接上时要设置的样式。什么是伪类,伪元素?伪类:用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。比如说,当用户悬停在指定的元素时,我们可以…

    2025年8月25日
    3
  • Django(64)频率认证源码分析与自定义频率认证「建议收藏」

    Django(64)频率认证源码分析与自定义频率认证「建议收藏」前言有时候我们发送手机验证码,会发现1分钟只能发送1次,这是做了频率限制,限制的时间次数,都由开发者自己决定频率认证源码分析defcheck_throttles(self,request):

    2022年8月7日
    4

发表回复

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

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