Luckysheet 图表(chartmix)

快速搭建luckysheet

第一步

这里用文档给的CDN方式引入

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/plugins.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/assets/iconfont/iconfont.css' />
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js"></script>

第二步

指定一个表格容器

<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>

第三步

创建一个表格

<script>$(function () {//配置项var options = {container: 'luckysheet' //luckysheet为容器id}luckysheet.create(options)})
</script>

至此，准备工作已经完成，现在用浏览器打开应该可以看到luckysheet页面了

引入插件ECharts

目前支持ECharts，图表使用了一个中间插件ChartMix (MIT协议）

<script>$(function () {//配置项var options = {container: 'luckysheet', //luckysheet为容器idplugins: ['chart']}luckysheet.create(options)})
</script>

启用插件后，应该会报下面的错误信息

Refused to apply style from 'http://127.0.0.1:5500/expendPlugins/chart/chartmix.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
util.js:642 GET http://127.0.0.1:5500/expendPlugins/chart/chartmix.umd.min.js net::ERR_ABORTED 404 (Not Found)

在luckysheet中输入图表所需的测试数据，点击图中2图标生成ECharts

生成效果

这里你已经成功一半，接下来完善一下代码，这里我们用localStorage模拟后端交互

$(function () {//配置项var options = {container: 'luckysheet', //luckysheet为容器idplugins: ['chart']}//这里初始化加载时从localStorage里取存储的数据options.data = JSON.parse(localStorage.getItem('luckysheet'))luckysheet.create(options)
})
//自己编写的函数，存储前将配置合并到luckysheet中到chart对象里
function getLuckysheetConfig() {let ls = luckysheet.getLuckysheetfile()ls.forEach((item, index) => {if(item.chart) {item.chart.forEach((chart, i) => {ls[index].chart[i] = {...ls[index].chart[i],chartOptions: {...chartmix.default.getChartJson(chart.chart_id)}}let div = document.getElementById(chart.chart_id + '_c');if(div.style) {ls[index].chart[i].left = parseInt(div.style.left)ls[index].chart[i].top = parseInt(div.style.top)ls[index].chart[i].width = parseInt(div.style.width)ls[index].chart[i].height = parseInt(div.style.height)}})}})return JSON.stringify(ls)
}
//浏览器控制台直接调用save()函数即可保存配置
function save() {localStorage.setItem('luckysheet', getLuckysheetConfig())
}

生成图表后，直接浏览器调用全局save()函数，将luckysheet配置保存到localStorage，再次刷新页面后从localStorage里读取配置。
更多其他配置，请移步Luckysheet文档

Luckysheet 图表(chartmix)相关推荐

【VUE 项目中使用luckysheet（在线表格）】
VUE 项目中使用luckysheet 描述资料本地引入组件开发创建组件组件使用使用中遇到的问题 1. 后台图表chartMix报undefined 2. 回显时默认显示第一个sheet ...
vue引入luckysheet插入图表时报错Uncaught TypeError: h.createChart is not a function
Luckysheet(excel)引入chartMix的问题记录问题:离线引入Luckysheet,插入图表时报错Uncaught TypeError: h.createChart is not a ...
Luckysheet（excel）引入chartMix的问题
官网地址: Luckysheet文档引入文件发现chartMix插入不了图表并报错,查看源码luckysheet.umd.js是因为地址不对将expendPlugins/chart/c ...
第二章：解决LuckySheet 使用生成图表的时候发生 h.createChart is not a function错误
1.问题背景:点击生成图表的时候会发生h.createChart is not a function的错误: 2.解决:这个是因为使用图表的时候需要配置 plugins:['chart'] var o ...
luckysheet打印按钮功能实现，及重写getScreenshotNew打印截图支持插入图片及图表
目前使用lukysheet做报表设计器,在开发过程中发现luckysheet插件功能很全面,因此选用此组件,但免费东东,功能虽好但bug也多. 原工具栏中的打印按钮未实现功能,因此本人重新实现了功能. ...
vue项目中引入Luckysheet
Luckysheet 介绍 Luckysheet ,一款纯前端类似excel的在线表格,功能强大.配置简单.完全开源. 实现功能格式设置样式 (修改字体样式,字号,颜色或者其他通用的样式) 条件格 ...
excel在线_功能强大的纯前端 Excel 在线表格： Luckysheet
[导语]:Luckysheet是一款类似excel的在线表格,纯前端,功能强大.配置简单.完全开源,几行代码就能展现出一个功能完备的在线表格. 简介 Luckysheet是一款类似excel的纯前端在 ...
Luckysheet(在线表格) v2.1.12
简介: Luckysheet是完全开源的一个类似于excel的在线表格,内置格式设置.单元格.行和列操作.撤销.重做.选区拖拽.公式和函数.表格操作等功能,还提供了图表.数据透视表.截图.插入图片等增 ...
Vue或uniapp使用luckysheet免费开发多人在线编辑Excel文档
前言一直想用uniapp开发个在线多人编辑Excel文档的APP,苦于一直没找到免费的开源库,今天心血来潮,和大神聊起知道有luckysheet这么个免费的东东,看了文档,还挺合适.立即撸起.虽说是 ...

Luckysheet 图表(chartmix)

快速搭建luckysheet

第一步

第二步

第三步

引入插件ECharts

Luckysheet 图表(chartmix)相关推荐

最新文章

热门文章