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


相关推荐

  • oracle 11g 怎么安装,oracle 11g安装图解 Oracle 11g安装图文教程[通俗易懂]

    oracle 11g 怎么安装,oracle 11g安装图解 Oracle 11g安装图文教程[通俗易懂]之前也找过oracle11g安装图解,不过一直没找到合适的Oracle11g安装图文教程,下面这篇oracle11g安装图解比较详细,希望对Oracle学习者有帮助:一、Oracle下载注意Oracle分成两个文件,下载完后,将两个文件解压到同一目录下即可。路径名称中,最好不要出现中文,也不要出现空格等不规则字符。官方下地址:http://www.oracle.com/technetwo…

    2022年9月21日
    0
  • snmpwalk命令常用方法

    snmpwalk命令常用方法SNMPWALK是一个通过SNMPGET-NEXT类型PDU,实现对目标AGENT的某指定MIB分支信息进行完整提取输出的命令工作。命令行:[html] viewplain copysnmpwalk [选项] agent [oid]  选项参数:由于SNMP协议中,不同的协议版本存在不同的参数选项,以下参数按协议分开说明。

    2022年6月29日
    28
  • pytest fixtures_pytest allure

    pytest fixtures_pytest allurefixture的优势Pytest的fixture相对于传统的xUnit的setup/teardown函数做了显著的改进:命名方式灵活,不局限于setup和teardown这几个命名conf

    2022年7月29日
    3
  • Arduino TaskScheduler入门

    Arduino TaskScheduler入门#include<TaskScheduler.h>//回调函数声明,具体要执行的函数内容voidtask_1();//…voidtask_n();//计划任务声明,Task中要执行的函数名Taskt_end();//空任务,按需添加Taskt1(1000,10,&task_1);//任务名(间隔ms,执行次数,&执行函数)//…Tasktn(1000,TASK_FOREVER,&task_n);//TASK_ONCE,执.

    2022年8月31日
    0
  • Javascript:谈谈JS的全局变量跟局部变量

    Javascript:谈谈JS的全局变量跟局部变量今天公司一个实习小妹子问我两段JS代码的区别:vara=”Hello”;functiontest(){vara;alert(a);a=”World”;alert(a);}vara=”Hello”;functiontest(){alert(a);a=

    2022年6月14日
    76
  • 程序员:我终于知道post和get的区别

    程序员:我终于知道post和get的区别是一个老生常谈的话题,然而随着不断的学习,对于以前的认识有很多误区,所以还是需要不断地总结的,学而时习之,不亦说乎

    2022年4月27日
    40

发表回复

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

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