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

2,785 阅读4分钟

Charts Tool

由于业务需要,上个月跟一个小伙伴一起做了一个图表工具, 是时候写一篇软文推广一波了。 Charts Tool现在已经开源了,欢迎大家多多提意见。

主要是参考Kitchen一款为设计者提升工作效率的 Sketch 工具集,我在他的基础上丰富了自己想要的功能。

大纲

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

为什么我想做这个图表工具

1.懒

我是觉得程序员要学会“偷懒”,偷懒的含义是怎么样不让自己做大量重复性的劳动,如何利用等量的时间去创造更大的价值。在剩余的时间提升自己的技术能力。

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

2.少

市面上很少有这种生成图表的工具。即使有,对于开发来说,自动生成代码才是我们这等coder所需要的。

还有什么了???大家可以脑补,我再补充

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

使用场景

  1. UED

做设计的同学,遇到图表也是想方设法的想要展示自己的美感。那给你定制化一套图表,你就可以省去这些烦恼。

  1. 前端开发的同学

只需要编辑图表就能生成代码,你不想要吗?

  1. 制作数据报表的那些人

填写数据,编辑图表,生成图表,然后再粘贴到你的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吧。或者你也可以加入我们,一起好好打磨这个产品。