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吧。或者你也可以加入我们，一起好好打磨这个产品。