最近用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 + "
") 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 + "
") document.write(arr.sort(sortNumber)) </script> //输出 //10,5,40,25,1000,1 //1,5,10,25,40,1000
使用拍过序的数组,做出的图效果就会和第二张图一样了