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


相关推荐

  • 二维数组初始化 java_二维数组的初始化 java

    二维数组初始化 java_二维数组的初始化 java第一种方式 inta 1 2 3 4 5 6 第二种方式 int ints newint 4 2 ints i j 分别赋值 第三种方式 第二维的长度可以动态申请 只可以动态申请第二维 不可以动态申请第一维 int arr3 newint 5 五行的长度 for inti 0 iarr3 i newi

    2026年2月2日
    0
  • 交换机划分vlan配置_同一交换机vlan互通

    交换机划分vlan配置_同一交换机vlan互通原标题:一步步详解华为交换机配置实例,一看就会实例一、配置交换机的vlan,使同vlan交换机互通在项目中,给网络项目划分vlan,这个是最常见的配置,基本上大部分项目都有的,那么如何来划分vlan呢?使同vlan的主机能够互相通信呢?我们来看下下面案例。如下图:LSW1与LSW2都是三层交换机,现在两台交换机分别连着两台pc。其中:LSW1的0/0/1端口连着pc1,0/0/2连着pc2,0/0…

    2026年1月27日
    5
  • python画qq图_python绘制散点图

    python画qq图_python绘制散点图qq图有两个作用:1、检验一组数据是否服从某一分布。2、检验两个分布是否服从同一分布。qq图全称是quantile-quantileplot,从名称中可以了解到是和分位数相关的图。由于最近在做数据分析时用到了,然而看了一些博客,要么是qq图讲解的比较详尽但是没有使用Python;要么是使用Python语言但是没有讲清楚原理。基于此,想写一篇博客尽量讲清楚原理并且用Python实现出来。qq图原理…

    2022年8月10日
    30
  • 电商扣减库存_电商后台系统产品逻辑全解析[通俗易懂]

    电商扣减库存_电商后台系统产品逻辑全解析[通俗易懂]作者:刘志远,电商产品经理,主导过多业务的电商产品搭建、更新迭代。微信公众号:碎碎恋产品,喜欢闲侃产品设计、商业分析以及后台挖坑一、产品经理(现实的理想主义者,对产品有着无比认真的态度,同时能够适当妥协,利用有限的资源来推动产品目标的达成)日常工作:了解用户和市场(学会把用户需求转化为产品需求)、设计产品方案(评定需求优先级)、跟进开发进度、跟进用户反馈,优化迭代电子商务的几种模式:B2C(B…

    2022年10月1日
    5
  • windows下如何安装Composer?

    windows下如何安装Composer?

    2021年10月20日
    116
  • 如何把自己的百度网盘的内容分享给别人

    如何把自己的百度网盘的内容分享给别人

    2021年9月18日
    624

发表回复

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

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