一键生成BizCharts图表代码的Sketch插件

时间 2019-11-22

标签一键生成 bizcharts 图表代码 sketch 插件繁體版

原文原文链接

Charts Tool

因为业务须要，上个月跟一个小伙伴一块儿作了一个图表工具, 是时候写一篇软文推广一波了。 Charts Tool如今已经开源了，欢迎你们多多提意见。

主要是参考Kitchen一款为设计者提高工做效率的 Sketch 工具集,我在他的基础上丰富了本身想要的功能。javascript

大纲

为何我想作这个图表工具
使用场景
所使用的技术栈
功能点
难点
目前遗留问题
功能迭代计划
参考

为何我想作这个图表工具

1.懒

我是以为程序员要学会“偷懒”，偷懒的含义是怎么样不让本身作大量重复性的劳动,如何利用等量的时间去创造更大的价值。在剩余的时间提高本身的技术能力。

以前作可视化大屏项目的时候，首先你要通读一遍图表开发文档。并且常常要查api，在作的过程当中很烦。因而我就想作一个一劳永逸的事情，本身写一个生成图表的工具，无需看开发文档。直接经过Charts Tool编辑图表属性生成相对应的图表及代码。前端

2.少

市面上不多有这种生成图表的工具。即便有，对于开发来讲，自动生成代码才是咱们这等coder所须要的。

还有什么了？？？你们能够脑补，我再补充java

预留坑位，给各位要吐槽的大佬，哈哈哈react

使用场景

作设计的同窗，遇到图表也是千方百计的想要展现本身的美感。那给你定制化一套图表，你就能够省去这些烦恼。git

前端开发的同窗

只须要编辑图表就能生成代码，你不想要吗？程序员

制做数据报表的那些人

填写数据，编辑图表，生成图表，而后再粘贴到你的ppt上是否是会很轻松github

如今以上场景均已实现web

所使用的技术栈

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渲染的。json

目前遗留问题

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>
      );
    };
  `;
复制代码

如今项目的图表数据都是以单个文件的形式存在，很差统一，后期维护成本有点高。

开发前期踩过不少坑，也考虑了不少，可是当时是想着先把它作出来，而后再去优化。canvas

功能迭代计划

图表接入规范，如何减小引入外部图表的工做量，最终丰富图表库
考虑项目的可持续性发展
考虑后期web项目的应用场景

若是有大家的加入，我相信咱们这个产品会更好

参考

结语

谢谢你们的观看，以为Charts Tool好的，那就毫无犹豫的去github上给个star吧。或者你也能够加入咱们，一块儿好好打磨这个产品。