纯前端JavaScript实现Excel IO案例分享(3)

wijmo.grid.xlsx.FlexGridXlsxConverter.save(dataGrid,
    { includeColumnHeaders: true }, fileName);
这个表格还支持过滤,分组,筛选,编辑。 

面积图和柱状图 

就在完成Excel IO 之后,发现这个控件包还可以做面积图,柱状图和其他很多类型的图形。
所以在这里就演示一个面积图的和一个柱状图的例子。
首先,要将包引进来。 
<script src="https://www.jb51.net/article/wijmo/dist/controls/wijmo.chart.min.js"></script>
然后经过下面几句代码,就可以使用在页面中插入一个柱状图 

chart = new wijmo.chart.FlexChart('#chart'); chart.initialize({ itemsSource: collectionView, bindingX: 'name', options: { groupWidth: 15 }, series: [ { name: '年龄', binding: 'age' }, ] });

下面看效果

纯前端JavaScript实现Excel IO案例分享

其中,颜色和柱状图的形状可以调整的。当鼠标移到元素上,还有会小提示。 

在这里,只需要改变一下chart的类型,就可以切换为其他类型的图表 

chart.chartType = chart.chartType === wijmo.chart.ChartType.Column ? wijmo.chart.ChartType.Area : wijmo.chart.ChartType.Column;

关于本篇的代码已经上传 (jb51.net).rar

后续会托管到github.

最终还是比较快的完成了任务。 

关于这个项目的Excel IO 就简单介绍到这里,这个项目现在已经完成了,后续会分享一些其他的技术细节。 

希望可以对你提供帮助。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzffws.html