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

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

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • vue实现简单的分页功能[通俗易懂]

    vue实现简单的分页功能[通俗易懂]分页其实就是对一组数据分组!而vue又刚好是数据驱动,所以我们只需要关注数据层就行了!分页开始—>变量:data(){return{//假设这是后台传来的数据来源data:[],//所有页面的数据totalPage:[],//每页显示数量pageSize:5,…

  • mysql tinytext_给学生提供什么类型的输入

    mysql tinytext_给学生提供什么类型的输入除了CHAR和VARCHAR字符类型时,MySQL为我们提供了TEXT具有更多的功能,其类型CHAR和VARCHAR不能覆盖。的TEXT是用于存储可以采取从1个字节到4GB长格式文本字符串是有用的。我们经常会TEXT在新闻站点中找到用于存储文章正文的数据类型,在电子商务站点中会找到产品描述的数据类型。与CHAR和不同VARCHAR,在TEXT为列使用类型时不必指定存储长度。另外,在检索或插入文本数据(如CHAR和)时,MySQL不会删除或填充空格VARCHAR。请注意,TEXT数据未存储在数据库服

  • 拉格朗日中值定理_拉格朗日中值定理解决高考题

    拉格朗日中值定理_拉格朗日中值定理解决高考题定理表述定理表述如果函数f(x)满足:(1)在闭区间[a,b]上连续;(2)在开区间(a,b)内可导;那么在开区间(a,b)内至少有一点使等式成立。其他形式其他形式记令则有上

  • GAN是一种特殊的损失函数?

    GAN是一种特殊的损失函数?

  • 为什么0xffffffff是-1?(计算机对整型的存储)[通俗易懂]

    为什么0xffffffff是-1?(计算机对整型的存储)[通俗易懂]一个数字在计算机中都是以二进制补码的形式存储的。先了解这句核心。。。我们认为中的int整型数值顺序java中int类型是4个字节,也就是32位,其中第一位是符号位,int数值的存储结构我们利用System.out.println(Integer.toBinaryString(Integer.MAX_VALUE));拿到int的最大值,是1111111111111111111111111111111,31个1,首位是0(代表正数,省略了)那我们给int的最大值+1,会发生什么呢?Sys

  • Prometheus monitor RabbitMQ

    Prometheus monitor RabbitMQ

发表回复

您的电子邮箱地址不会被公开。

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