Charts Tool
由于业务需要,上个月跟一个小伙伴一起做了一个图表工具, 是时候写一篇软文推广一波了。 Charts Tool现在已经开源了,欢迎大家多多提意见。主要是参考Kitchen一款为设计者提升工作效率的 Sketch 工具集,我在他的基础上丰富了自己想要的功能。
大纲
- 为什么我想做这个图表工具
- 使用场景
- 所使用的技术栈
- 功能点
- 难点
- 目前遗留问题
- 功能迭代计划
- 参考
为什么我想做这个图表工具
1.懒
我是觉得程序员要学会“偷懒”,偷懒的含义是怎么样不让自己做大量重复性的劳动,如何利用等量的时间去创造更大的价值。在剩余的时间提升自己的技术能力。之前做可视化大屏项目的时候,首先你要通读一遍图表开发文档。而且经常要查api,在做的过程中很烦。于是我就想做一个一劳永逸的事情,自己写一个生成图表的工具,无需看开发文档。直接通过Charts Tool编辑图表属性生成相对应的图表及代码。
2.少
市面上很少有这种生成图表的工具。即使有,对于开发来说,自动生成代码才是我们这等coder所需要的。还有什么了???大家可以脑补,我再补充
预留坑位,给各位要吐槽的大佬,哈哈哈
使用场景
- UED
做设计的同学,遇到图表也是想方设法的想要展示自己的美感。那给你定制化一套图表,你就可以省去这些烦恼。
- 前端开发的同学
只需要编辑图表就能生成代码,你不想要吗?
- 制作数据报表的那些人
填写数据,编辑图表,生成图表,然后再粘贴到你的ppt上是不是会很轻松
现在以上场景均已实现
所使用的技术栈
- react + antd + BizCharts + umi
- Sketch webView
功能点
- 查看图表,编辑图表数据
- 编辑样式及图表属性,查看历史记录
- 应用历史记录,生成svg展示在sketch中
难点
- 如何将web中生成的BizCharts图表插入到sketch 中,通过 Sketch webview开发可以实现sketch webview与 web项目之间的通信
- SVG-Insert 将web生成的svg dom 转成 sketch图层,应用在sketch中进行编辑。
##################核心代码
## web
/* 下方代码为生成svg,展示在sketch中 */
const { title, subTitle } = chartConfig
const { group, type } = chartRoute
const { subTitle: layerTitle } = getMenuInfoFromRoute(group, type);
const targetSvg = getSvgCodeFromEle(document.getElementsByTagName('svg'));
console.log(targetSvg);
window.postMessage(
'JsBridge_InsertSvg',
JSON.stringify({
layerTitle,
svg: targetSvg,
config: {
title,
subTitle,
},
}),
);
复制代码
## sketch webview
// add a handler for a call from web content's javascript
webContents.on('JsBridge_InsertSvg', data => {
const json = JSON.parse(data);
const { svg, config, layerTitle } = json;
SvgInsert(context, json, webContents);
browserWindow.close();
});
复制代码
- 生成的图表数据与属性和原始图表的合并
## web index.js
const getFullChartConfig = () => {
const result = merge({}, chartData[group][type], chartFormatUtils[group][type](chartConfig));
return result;
};
复制代码
注意如果要生成svg dom,图表必需是支持svg渲染的。BizCharts可以支持canvas和svg渲染的。
目前遗留问题
- BizCharts 数据transform的反向应用生成代码的时候,现在只考虑解析一层,如果图表比较复杂,需要额外维护。
################# ReactFromJson index.js
## transform为一个对象
return `
import React from 'react';
import { Chart, Geom, Axis, Tooltip, Coord, Legend, Label, Guide } from 'bizcharts';
${transform ? `import DataSet from '@antv/data-set';` : ''}
const { Html } = Guide;
export default () => {
const data = ${JSON.stringify(data)}
${transform
? `const { DataView } = DataSet;
const dv = new DataView();
dv.source(data).transform(${JSON.stringify(transform)});
` : ''}
return (
<Chart ${getPropsFromJson(ChartProps)} data=${transform ? `{dv}` : '{data}'}>
${XAxisProps ? `<Axis ${getPropsFromJson(XAxisProps)} />` : ''}
${YAxisProps ? `<Axis ${getPropsFromJson(YAxisProps)} />` : ''}
${TooltipProps ? `<Tooltip ${getPropsFromJson(TooltipProps)} />` : ''}
${Array.isArray(GeomProps) ? GeomProps.map(item => `<Geom ${getPropsFromJson(item)} />`) : `<Geom ${getPropsFromJson(GeomProps)}>${LabelProps ? `<Label ${getPropsFromJson(LabelProps)} />` : ''}</Geom>`}
${CoordProps ? `<Coord ${getPropsFromJson(CoordProps)} />` : ''}
${LegendProps ? `<Legend ${getPropsFromJson(LegendProps)} />` : ''}
${GuideProps ? `<Guide ${getPropsFromJson(GuideProps)}>${HtmlProps ? `<Html ${getPropsFromJson(HtmlProps)} />` : ''}</Guide>` : ''}
</Chart>
);
};
`;
复制代码
- 现在项目的图表数据都是以单个文件的形式存在,不好统一,后期维护成本有点高。
开发前期踩过很多坑,也考虑了很多,但是当时是想着先把它做出来,然后再去优化。
功能迭代计划
- 图表接入规范,如何减少引入外部图表的工作量,最终丰富图表库
- 考虑项目的可持续性发展
- 考虑后期web项目的应用场景
如果有你们的加入,我相信我们这个产品会更好
参考
结语
谢谢大家的观看,觉得Charts Tool好的,那就毫无犹豫的去github上给个star吧。或者你也可以加入我们,一起好好打磨这个产品。