Javascript 实现 Excel 导入生成图表功能


Posted in Javascript onOctober 22, 2018

前一段时间做了一个用 JS 实现图表显示的功能,加上这次的Excel 导入功能,最终的效果是这样的:

Javascript 实现 Excel 导入生成图表功能

怎么样?如果看了心动的话,就接着往下看吧。 本次的这个设计需要用到几个插件:jquery.js、xlsx.js、echarts.js,大家需要提前进行下载,之后新建demo.html,demo.js,style.css文件,然后新建一个你想要操作的EXCEL文件,我这里的例子是这样的:

Javascript 实现 Excel 导入生成图表功能

好了,先看HTML代码,引入js,然后使用div布局,代码如下:

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Excel图表生成工具</title>
 <link rel="stylesheet" href="css/style.css">
 <script src="js/jquery.min.js"></script>
 <script src="js/xlsx.full.min.js"></script>
 <script src="js/echarts.min.js"></script>
 <script src="js/demo.js"></script>
</head>
<body>
 <div class="barner">
  <div class="left">
   <h1>Excel图表生成工具</h1>
  </div>
  <div class="right">
   <input id="select_text" type="text" placeholder="请选择文件···" readonly />
   <input id="select_file" type="file" />
   <a id="select_btn" href="javascript:void(0);">选择文件</a>
  </div>
 </div>
 <div class="content">
  <div id="table"></div>
  <div id="chart" style="width: 700px; height: 400px;"></div>
 </div>
</body>

这里需要强调一下,选择文件的 “input” 标签的美化效果,这个标签在css 样式中会隐藏,我用另一个 “a” 链接标签实现点击按钮的作用,后续的效果在 js 代码中实现。

接着看 js 代码, js 中 “a” 标签点击事件中触发 “input” 标签点击事件,然后再给文本赋值,显示文件路径,之后调用导入Excel 方法:

$(document).ready(function () {
 $('#select_btn').click(function () {
  $('#select_file').trigger('click');
 })
 $('#select_file').change(function () {
		$('#select_text').val($('#select_file').val());
  importf(this);
 })
})

接下来实现导入Excel 方法,定义一个wb变量用于接收读取的EXCEL文档数据,读取过程是调用 xlsx.js 插件 实现的,官方demo中有标准的写法,这里不用纠结为什么这么写,知道这么用就可以,最后通过 XLSX.utils.sheet_to_json()方法可以得到 json 数据。

得到 json 数据后就是原生的 js 语法操作了,我们可以得到一个形如EXCEL表格那样的data 数组,代码如下:

var wb;//读取完成的数据
var rABS = false; //是否将文件读取为二进制字符串
function importf(obj) {//导入
 if (!obj.files) {
  return;
 }
 var f = obj.files[0];
 var reader = new FileReader();
 reader.onload = function (e) {
  var data = e.target.result;
  if (rABS) {
   wb = XLSX.read(btoa(fixdata(data)), {//手动转化
    type: 'base64'
   });
  } else {
   wb = XLSX.read(data, {
    type: 'binary'
   });
  }
  // 获取 EXCEL json数据
  var jsondata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
  var column = [];
  var data = [column];
  for (var key in jsondata[0]) {
   data[0].push(key);
  }
  for (var i = 0; i < jsondata.length; i++) {
   var row = [];
   data.push(row);
   for (var key in jsondata[i]) {
    data[i + 1].push(jsondata[i][key]);
   }
  }
  // 显示EXCEL 表格
  creattable(data);
  // 显示数据表
  getMultiBarChart(data);
 };
 if (rABS) {
  reader.readAsArrayBuffer(f);
 } else {
  reader.readAsBinaryString(f);
 }
}
function fixdata(data) { //文件流转BinaryString
 var o = "",
  l = 0,
  w = 10240;
 for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));
 o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
 return o;
}

关于EXCEL表格的实现,我是通过 “table” 标签实现的,在代码中,通过循环操作data 数组数据,形成一个html 代码,最后添加到对应的 div 块中。同时为了显示不同的表头样式,需要添加 id 属性,在css样式中实现样式的操作,代码如下:

function creattable(data) {
 var _html = " <table>";
 for (var i = 0; i < data.length; i++) {
  _html += "<tr>";
  _html += "<th>" + data[i][0] + "</th>";
  for (var j = 1; j < data[i].length; j++) {
			if(i == 0){
				 _html += "<td id='column'>" + data[i][j] + "</td>";
				}
				else
				{
   _html += "<td>" + data[i][j] + "</td>";
				}
  }
  _html += "</tr>";
 }
 _html += "</table>";
 $('#table').append(_html);
}

关于图表功能的实现,是调用 echart.js 插件实现的,在echart 官网,有非常详尽的设计文档和大量的demo可以参考,我们需要做的只是学会各个属性是如何配置的,然后调用 echart 的方法即可,具体实现看代码吧:

getMultiBarChart = function (datatable) {
 var colors = ['#0099CC', '#FF9933', '#99CC33', '#393939', '#f50001', '#fad797', '#59ccf7', '#c3b4df'];
 var myChart = echarts.init(document.getElementById('chart'));
 var option = {
  legend: { bottom: "bottom" ,textStyle:{
			color: '#fff'
			}},
  dataset: {
   source: datatable
  },
  xAxis: [
   { type: 'category', gridIndex: 0, 
			axisLine:{
			lineStyle:{
				color: '#fff'
			}}}
  ],
  yAxis: [
   { gridIndex: 0,axisLine:{
			lineStyle:{
				color: '#fff'
			}}}
  ],
  series: []
 };
 for (var i = 0; i < datatable.length - 1; i++) {
  option.series[i] = {
   type: 'bar', seriesLayoutBy: 'row',
   label: {
    normal: {
     show: true,
     position: 'top'
    }
   },
   itemStyle: {
    normal: {
     color: colors[i],
    }
   },
  };
 }
 // 使用刚指定的配置项和数据显示图表。
 myChart.setOption(option);
}

讲的这里,我设计的导入EXCEL文件生成图表的功能的全部实现了,关于css 的样式设计,可以参考下面的代码进行设计,不过每个人都有自己的想法,界面如何做的友好,也是前端工程师的一项技能。

body {
 background-color: #383838;
 font-family: Arial, sans-serif;
 line-height: 1.5;
 color: #464646;
}
.barner {
 margin:0 auto;
 height: 80px;
 width: 70%;
 max-width:1100px;
}
.left{
 float: left;
 color: #00A2D4;
}
.right{
 float: left;
 margin: 30px 0 0 250px;
}
#select_text {
 padding:3px 6px;
 padding-left:10px;
 border:1px solid #E7EAEC;
 width:230px;
 height:25px;
 line-height:25px;
 border-left:3px solid #3FB7EB;
 background:#FAFAFB;
 border-radius:2px;
}
#select_file{
 border:0px;display:none;
}
#select_btn{
 color:#00A2D4;
 padding:4px 6px;
 border:1px solid #00A2D4;
 border-radius:2px;
 text-decoration: none;
}
.content {
 margin:50px auto;
 height: 80px;
 width: 70%;
 max-width:1100px;
}
table
{
 border-collapse :collapse ;
 margin:0 auto;
}
th
{
 width:100px;
 height:25px;
 border :1px solid white;
 font-size:12px;
 text-align :center;
 color: white;
 background-color: #00A2D4;
}
td
{
 width:200px;
 border :1px solid white;
 color: white;
 font-size:12px;
 text-align :left;
}
#column
{
	background-color: #00A2D4;
}
#chart
{
 border-collapse :collapse ;
 margin:0 auto;
}

总结

以上所述是小编给大家介绍的Javascript 实现 Excel 导入生成图表功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
强制设为首页代码
Jun 19 Javascript
JavaScript中SQL语句的应用实现
May 04 Javascript
JQuery中的事件及动画用法实例
Jan 26 Javascript
JavaScript通过prototype给对象定义属性用法实例
Mar 23 Javascript
微信小程序 获取相册照片实例详解
Nov 16 Javascript
jQuery插件之validation插件
Mar 29 jQuery
bootstrap表单示例代码分享
May 18 Javascript
node.js的Express服务器基本使用教程
Jan 09 Javascript
vue实现局部刷新的实现示例
Apr 16 Javascript
详解vue的数据劫持以及操作数组的坑
Apr 18 Javascript
js针对图片加载失败的处理方法分析
Aug 24 Javascript
vue实现轮播图帧率播放
Jan 26 Vue.js
js实现动态增加文件域表单功能
Oct 22 #Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
Oct 22 #Javascript
js实现input密码框显示/隐藏功能
Sep 10 #Javascript
Vue slot用法(小结)
Oct 22 #Javascript
TypeScript基础入门教程之三重斜线指令详解
Oct 22 #Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
Oct 22 #Javascript
vue-cli项目中使用echarts图表实例
Oct 22 #Javascript
You might like
PHP聊天室技术
2006/10/09 PHP
第四节--构造函数和析构函数
2006/11/16 PHP
PHP中函数内引用全局变量的方法
2008/10/20 PHP
PHP中CURL方法curl_setopt()函数的参数分享
2013/01/19 PHP
PHP实现把MySQL数据库导出为.sql文件实例(仿PHPMyadmin导出功能)
2014/05/10 PHP
PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
2014/06/09 PHP
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
2016/07/21 PHP
JavaScript Event学习第七章 事件属性
2010/02/07 Javascript
JS中获取数据库中的值的方法
2013/07/14 Javascript
将数字转换成大写的人民币表达式的js函数
2014/09/21 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
2015/11/17 Javascript
JavaScript实战(原生range和自定义特效)简单实例
2016/08/21 Javascript
Javascript日期格式化format函数的使用方法
2016/08/30 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
2017/02/28 Javascript
jQuery简易时光轴实现方法示例
2017/03/13 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
2017/08/10 jQuery
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
2018/01/03 Javascript
微信小程序实现的canvas合成图片功能示例
2019/05/03 Javascript
搭建一个Koa后端项目脚手架的方法步骤
2019/05/30 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
Python numpy.array()生成相同元素数组的示例
2018/11/12 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
Python中注释(多行注释和单行注释)的用法实例
2019/08/28 Python
Django中ORM的基本使用教程
2020/12/22 Python
英国在线定做百叶窗网站:Make My Blinds
2020/08/17 全球购物
将"引用"作为函数返回值类型的格式、好处和需要遵守的规则
2016/02/09 面试题
会计顶岗实习心得
2014/01/25 职场文书
大学毕业自我鉴定范文
2014/02/03 职场文书
《最佳路径》教学反思
2014/04/13 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
经费申请报告
2015/05/15 职场文书
人间正道是沧桑观后感
2015/06/15 职场文书
入学证明
2015/06/23 职场文书
Python竟然能剪辑视频
2021/05/25 Python
Python爬虫中urllib3与urllib的区别是什么
2021/07/21 Python
使用 DataAnt 监控 Apache APISIX的原理解析
2022/07/07 Servers