奥门威尼斯网址纯JS前端达成分页代码_javascript能力_脚本之家

一、什么是旭日图

先给大家展示下效果图,如果大家感觉效果不错,请参考实现代码:

背景

旭日图是在Excel
2016中新增的一种图表。有些类似饼图,饼图的优势是可以显示占比。但是饼图只能显示单级数据。旭日图用来表示多层级数据的占比。旭日图以一种分层方式显示,非常适合用来显示层级数据。层次结构中每个级别的比例通过1个圆环表示,离原点越近代表圆环级别越高,最内层的圆表示顶级结构,然后一层一层去看数据的占比情况。

因为这是我自己第一次动手用js写分页,写的应该也不是很完美,有些公共的没有抽取出来,但是用起来还是可以的,这块代码是可以把它当做公共的分页去处理的,我就是用这块代码写了两个稍微不同一些的分页!公共的代码抽取的也差不多,主要就是ajax后台以及返回的值不同而已,只要把总页码的值获取到,点击首页/下一页等传值正确的话,基本上分页是不会出什么问题的

在项目开发过程中,经常会有图片导出的需求,尤其是带有图表类的应用,通常需要将图表下载导出。

我们通过一个简单的示例,初步感受一下旭日图的魅力。

网上确实有很多分页的插件以及开源代码,单本是一个后台开发猿,前台css等样式还驾驭不住,所以就开始自己去写了。其实这个分页原理很简单,就是用ajax往后台传值,后台使用limit进行分页。

在chrome等新版浏览器中实现base64图片的下载还是比较容易的:

表1 某产品的销量统计

废话不多说,直接上代码了!

创建一个a标签 将a标签的href属性赋值为图片的base64编码
指定a标签的download属性,作为下载文件的名称 触发a标签的点击事件

图1 用旭日图表示的销量

注:本项目是全程使用js来写的,前台的数据通过ajax进行获取,然后再进行拼装,动态加载到页面。

但是这套逻辑在IE下是不行的,这样写会直接报错。

通过表1我们可以看到它是一个层级数据,第1级是季度,第2级是月份,第3级是周。图1是根据表1在Excel中绘制的旭日图。内层显示第1级季度,其外层的圆环显示第2级月份,最外层圆环显示第3级周。显示的每个占比是根据其对应的销售来计算。

1.先把上一页,下一页等的代码附上(里面的值都是伪值,下面会在js里进行重新赋值的!)

所以IE下需要单独处理,这里IE在处理这种文件的时候给提供了一个单独的方法:window.navigator.msSaveOrOpenBlob(blob,
download_filename)调用这个方法可以直接触发IE的下载,还是比较方便的。具体做法如下:

二、简单示例

  • 首 页
  • 上一页
  • 1
  • 2
  • 3
  • 13855
  • 下一页
  • 尾 页
  • 共13855页 到第页
// 截取base64的数据内容(去掉前面的描述信息,类似这样的一段:data:image/png;base64,)并解码为2进制数据var bstr = atob // 获取解码后的二进制数据的长度,用于后面创建二进制数据容器var n = bstr.length // 创建一个Uint8Array类型的数组以存放二进制数据var u8arr = new Uint8Array // 将二进制数据存入Uint8Array类型的数组中while  { u8arr[n] = bstr.charCodeAt }// 创建blob对象var blob = new Blob// 调用浏览器的方法,调起IE的下载流程window.navigator.msSaveOrOpenBlob(blob, 'chart-download' + '.' + 'png')

我们了解了旭日图之后,在有些场景中我们就想在自己的系统中使用旭日图。Wijmo中提供了JS控件可以让我们在Web纯前端使用旭日图。如果想在.Net平台下使用旭日图可以了解ComponentOne中的FlexChart。通过下面一个简单的示例,对如何使用旭日图有一个初步的了解。

2.首先在页面放两个隐藏域,一个是当前页码,一个是总页码,总页码是页面加载完,从后台查询出来后直接附上值的,当前页码是没操作一个,就要对当前页码赋值

整体实现代码

HTML文件:

3.写一个页面加载完的function,给总页码和当前页码赋值

 // 这里是获取到的图片base64编码,这里只是个例子哈,要自行编码图片替换这里才能测试看到效果 const imgUrl = 'data:image/png;base64,...' // 如果浏览器支持msSaveOrOpenBlob方法,那么调用该方法去下载图片 if (window.navigator.msSaveOrOpenBlob) { var bstr = atob var n = bstr.length var u8arr = new Uint8Array { u8arr[n] = bstr.charCodeAt } var blob = new Blob window.navigator.msSaveOrOpenBlob(blob, 'chart-download' + '.' + 'png') } else { // 这里就按照chrome等新版浏览器来处理 const a = document.createElement a.href = imgUrl a.setAttribute('download', 'chart-download') a.click() }

1、引入Wijmo的css和js

${$;//给当前页码进行赋值,默认为第一页ajaxfunction(page,arg,chipssort,'');//这个方法是抽取的ajax后台访问的方法});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

2、定义一个DIV

4.抽取的ajax方法,此页面会用到好几次这个方法,所有把它收取了出来,因为页面的数据时通过ajax从后台获取到的,后台返回的是一个List集合

这个DIV用户显示旭日图。

//抽取ajax的方法function ajaxfunction(page,arg,chipssort,fontval){$.ajax({type:'POST',url:'/admin/receptionchips/showlist',//请求的url地址data:{page:page,sort:arg,chipssort:chipssort,fontval:fontval},dataType:'json',contentType:'application/x-www-form-urlencoded; charset=utf-8',success:function{//返回值在进行访问抽取的方法,从后台返回commonfunction;}

3.代码看到这也不是很多,最后一个了

3、引入自定义的js文件

//抽取拼串的方法function commonfunction{$.find;for (var i=0;i }
 //开始是分页的核心了if{//设置页码var pading = data[0].padingnum;//总页码$.val;var page = $;//当前页$.html(""+page+"/"+pading+"");$.html("共"+pading+"页 到第页")}else{$.html(""+0+"/"+0+"");}//设置分页的底部 就是 首页 1 2 3 4 5 6 尾页var pading = data[0].padingnum;//总页码href="javascript:void;"var nowpage = $;//当前页//one two three five fore
 //下面代码看着是比较麻烦,但是也不难理解 全是一样的代码,只不过是加了些判断if.text.attr('href','javascript:pagenum.text.attr('href','javascript:pagenum;$;$.attr('href','javascript:pagenum;$;$.attr('href','javascript:pagenum;$;$.attr('href','javascript:pagenum;$.show.show();}else{//alert;//设置中间的为当前页$.text;$.attr('href','javascript:indexpage-2)+'");');$.text;$.attr('href','javascript:indexpage-1)+'");');$.text.attr('href','javascript:indexpage;$.show.show();//判断下一页是否超过了总页数if+1>pading){$.hide.hide.parent.text;$.attr('href','javascript:indexpage+1)+'");');}//判断下一页的第二页是否超过了总页数if+2>pading){$.hide.parent.text;$.attr('href','javascript:indexpage+2)+'");');}}//如果总页数小于5,这块代码主要就是设置 1 2 3 4 5 这些的显示和隐藏的if.parent.parent.parent.parent.parent;}else if{$;$;$.hide.hide.parent.parent.parent;}else if.parent.parent.parent.parent.parent;}else if.parent.parent.parent.parent.parent;}else if.parent.parent.parent.parent.parent;}else{$.show.show.parent.parent.parent;}//设置高亮显示的,就是是第一页时,1亮,第二页时 2亮$.each.parent().removeClass.text.parent;}});//分页完返回页面顶端$.animate;//最后,给当前页码加1$.val+Number; }

app.js:

好了,到这里分页就完成了,如果你们需要使用的话,可能会话费一会去理解我的代码,其实代码不难,我是使用了两个小时把它写完的,只要一行一行代码看,并且自己再加注释,把这块弄过去,不出半小时绝对搞定!

// 产生数据var app = { getData: function () { var data = [], months = [['Jan', 'Feb', 'Mar'], ['Apr', 'May', 'June'], ['Jul', 'Aug', 'Sep'], ['Oct', 'Nov', 'Dec']], years = [2014, 2015, 2016]; years.forEach { months.forEach { var quar = 'Q' + ; q.forEach { data.push, quarter: quar, month: m, value: Math.round }); }); }); }); return data; },};

创建了一个app类,其中包含一个getData方法,用于产生一个多级数据。它的级别分别是年、季度、月份。

sunburst.js:

 { 'use strict'; // 创建控件 var chart = new wijmo.chart.hierarchical.Sunburst; // 初始化旭日图 chart.beginUpdate(); // 旭日图包含的值得属性名 chart.binding = 'value'; // 设置层级数据中子项目的名称,用于在旭日图中生成子项 chart.bindingName = ['year', 'quarter', 'month']; // 设置数据源 chart.itemsSource = app.getData(); // 设置数据显示的位置 chart.dataLabel.position = wijmo.chart.PieLabelPosition.Center; // 设置数据显示的内容 chart.dataLabel.content = '{name}'; // 设置选择模式 chart.selectionMode = 'Point'; chart.endUpdate;

根据Div的ID创建一个Sunburst对象,设置数据源以及相关属性。数据源通过app.getData()提供。

下面是程序运行的结果。

三、用“旭日图”实现元素周期表

有了以上的知识储备之后,我们就可以做复杂一点的实现。下面我们用“旭日图”实现元素周期表。我们上高中的时候,都应该学习过元素周期表,它是类似如下的一张表。这张表更多了展示了元素的信息,但是没有很好的展示元素归类的信息。我们现在用旭日图来做它,对这点进行改善。

HTML文件:

和简单示例中的类似,需要引入Wijmo相关的样式和js文件。

1、引入自定义的js文件

2、定义一个DIV

DataLoader.js:

创建了一个DataLoader类,其中提供两个方法。readFile方法读取json文件获得数据。isInclude
方法判断数组中是否存在指定的元素。generateCollectionView方法中对数据进行加工处理。

var DataLoader = {};// 一级分类var METALS_TITLE = "金属";var NON_METALS_TITLE = "非金属";var OTHERS_TITLE = "过渡元素";// 二级分类var METAL_TYPES = '碱金属|碱土金属|过渡金属|镧系元素|锕系元素|其他金属'.split;var NON_METAL_TYPES = '惰性气体|卤素|非金属'.split;var OTHER_TYPES = '准金属|超锕系'.split;DataLoader = { readFile: function  { var reqClient = new XMLHttpRequest(); reqClient.onload = callback; reqClient.open("get", filePath, true); reqClient.send(); }, isInclude: function  { if .indexOf return true; else return false; }, generateCollectionView: function  { DataLoader.readFile('data/elements.json', function  { // 获取数据 var rawElementData = JSON.parse; var elementData = rawElementData['periodic-table-elements'].map { item.properties.value = 1; return item.properties; }); var data = new wijmo.collections.CollectionView; // 利用wijmo.collections.PropertyGroupDescription 进行第一级分组 data.groupDescriptions.push(new wijmo.collections.PropertyGroupDescription('type', function  { if (DataLoader.isInclude(METAL_TYPES, item[prop])) { return METALS_TITLE; } else if (DataLoader.isInclude(NON_METAL_TYPES, item[prop])) { return NON_METALS_TITLE; } else { return OTHERS_TITLE; } })); // 进行第二级分组 data.groupDescriptions.push(new wijmo.collections.PropertyGroupDescription('type', function  { return item[prop]; })); callback; }};

generateCollectionView方法中调用readFile获得json数据,之后利用Wijmo中提供的CollectionView对数据进行2级分组。第1级是金属、非金属、过渡元素。第2级分别是他们的子级别。第3级是元素,每个元素的Value都是1,表示元素的占比相同。

app.js:

和前边的简单示例相比,这里绑定的数据源是CollectionView.Groups,它是CollectionView中的第一级分组。

var mySunburst;function setSunburst(elementCollectionView) { // 创建旭日图控件 mySunburst = new wijmo.chart.hierarchical.Sunburst; mySunburst.beginUpdate(); // 设置旭日图的图例不显示 mySunburst.legend.position = 'None'; // 设置内圆半径 mySunburst.innerRadius = 0.1; // 设置选择模式 mySunburst.selectionMode = 'Point'; // 设置数据显示的位置 mySunburst.dataLabel.position = 'Center'; // 设置数据显示的内容 mySunburst.dataLabel.content = '{name}'; // 进行数据绑定 mySunburst.itemsSource = elementCollectionView.groups; // 包含图表值的属性名 mySunburst.binding = 'value'; // 数据项名称 mySunburst.bindingName = ['name', 'name', 'symbol']; // 在分层数据中生成子项的属性的名称。 mySunburst.childItemsPath = ['groups', 'items']; mySunburst.endUpdate();};DataLoader.generateCollectionView;

图4 旭日图表示的元素周期表

四、源码下载

旭日图简单示例的源码:

SunburstIntro.rar

旭日图表示元素周期表的代码:

PeriodicSunburst.rar

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

发表评论

电子邮件地址不会被公开。 必填项已用*标注