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)
上一篇 2022年5月2日 下午1:40
下一篇 2022年5月2日 下午2:00


相关推荐

  • 闫学灿acwing_AAU BBU RRU

    闫学灿acwing_AAU BBU RRU给定一个包含 n 个点 m 条边的有向图,并给定每条边的容量,边的容量非负。图中可能存在重边和自环。求从点 S 到点 T 的最大流。输入格式第一行包含四个整数 n,m,S,T。接下来 m 行,每行三个整数 u,v,c,表示从点 u 到点 v 存在一条有向边,容量为 c。点的编号从 1 到 n。输出格式输出点 S 到点 T 的最大流。如果从点 S 无法到达点 T 则输出 0。数据范围2≤n≤1000,1≤m≤10000,0≤c≤10000,S≠T输入样例:7 14 1 71 2

    2022年8月9日
    9
  • Typora ——一款Markdown编辑器入门教程

    Typora ——一款Markdown编辑器入门教程Typora——Markdown编辑器入门教程附上目录:文章目录Typora——Markdown编辑器入门教程一.序二.前言那么,什么是富文本格式?什么是Markdown?**Markdown编辑器和常见的富文本编辑器有什么区别?**二.Typora简介什么是Typora?当然,typora的魅力不止于此:三.Typora的安装四.配合扩展体验更佳1.配合Pandoc扩展程序实现导出2…

    2022年5月18日
    49
  • windows下使用aspera_vlc windows

    windows下使用aspera_vlc windows资源下载官网资源:https://ftp.gnu.org/pub/gnu/libiconv/libiconv-1.16.tar.gz环境配置编译环境:Win764位系统VS2015创建一个VS2015项目,应用程序类型使用静态库,注意取消勾选“使用预编译头”;将资源[libiconv-1.16\lib]文件夹下的所有文件,全部复制到第一步创建的工程目录下,并找到config.h….

    2025年5月22日
    6
  • java杀死进程_linux杀死所有进程

    java杀死进程_linux杀死所有进程使用jps命令jps的作用是显示当前系统的java进程情况及进程id。使用命令taskkill/f/pid”1952″后此时就杀死了当前的指定的进程

    2026年2月6日
    2
  • 常用Petri网模拟软件工具简介

    常用Petri网模拟软件工具简介常用 Petri 网模拟软件工具简介首先要介绍的的一个非常有名的 Petri 网网站 PetriNetsWor http www informatik uni hamburg de TGI PetriNets 我这里介绍的软件大部分在该网站中的 ToolsandSoft 中的 PetriNetsToo 里可以找到相

    2026年3月20日
    2
  • C# 项目没有.sln文件的解决办法:

    C# 项目没有.sln文件的解决办法:什么是sln文件?sln文件开发中使用的解决方案文件,使用解决方案文件(后缀为sln的文件)表示一个项目组,他通常包含一个项目中所有的工程文件信息。包括文件版本,工程信息,全局设置,通过打开sln文件就可以加载整个项目.但是我新建的一个项目里面没有Sln文件,该如何打开整个项目?解决办法:打开VS,点击新建项目,同时会生成一个解决方法,然后往这个解决方案里面添加现有项目,注意添加的是.cspro

    2022年5月3日
    184

发表回复

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

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