您现在的位置是：首页 > 文章详情

奔跑不止，万象更新｜datart 蛰伏十月，浴火重生

日期：2021-11-04点击：720收藏

喜闻乐道的大型电视连续剧《davinci啥时更新》终于在21年初秋迎来了尾声，随之而来的是喜闻乐见的新品datart（数艺）正式发版。这一年，大家可以看到的是群里此起彼伏的这样

这样。。

还有这样。。

还能这样？

未曾看到的，是一个年轻老团队的奔跑不止，一代敏捷大数据的万象更新，话不多说，都在产品里！我们会继续以长青的心、长新的艺，迎接未来与大家共处共进的时光，在大家的审视中前行，在大家的支持中欣喜。

「datart 1.0 alpha」

回顾

时间回到2017年初秋，davinci正式在github开源，初版和二版的davinci主要精力放在如何通过配置化方式可以快速将数据做成所需的图表，以满足配置化可视化的需求。彼时我们借鉴了如superset等优秀的开源项目，希望可以开发出适合国人使用习惯的开源可视化平台，帮助企业敏捷完成“大数据的最后一公里”。

时间来到2018年初秋，davinci第三版横空出世，基本上将davinci第二版完全推倒重做，因为在平台迭代和社区打磨中，我们的想法逐渐发生了变化，我们希望davinci可以支持企业完成“大数据的最后十公里”，不只是用来制作可视化报表，还可以支持制作数据大屏、支持移动端、支持轻数据处理、支持被整合到其他系统中、支持不同团队协同工作等等。基于这样的认知，我们推倒，重来。

第三版davinci在社区中取得了巨大的成功，成百上千家企业在生产中使用了davinci，或者二开为其客户提供了产品和服务。同时我们也在不断思索，数据可视化平台的下一站在哪里？

展望

在异世界冒险者的游戏里，每位冒险者都有自己的定位和技能树发展路线，也都有HP（体力值）和MP（魔力值）。数据可视化平台作为一个平台产品，也有自己的产品定位和发展蓝图，也有自己的HP（工程力）和MP（智能力）。数据可视化平台的工程力升级的下一站，是开放化，每个可能扩展的点都应该可插拔化（source、view、chart、viz等），数据可视化平台的智能力升级的下一站，是增强分析，可视化不止局限于看到数据的现状，也可以看到数据的动向。

于是，我们推倒、重来，在2021年初秋，datart孕育而生：

datart 从产品设计到内核代码全部重写，以一个全新的认知抽象，承载其新的产品使命。初期 datart 会在工程力上迭代拉满，后期会在智能力上探索前行，在开放能力、智能能力、可塑能力上不断增强，打造开源可视化平台的不二首选。

在工具平台产品化的道路上，我们相信“重复的力量”，为了平台产品复用度的不断提升，我们愿意不断推倒重来。未来，datart 会在数据和艺术之间找到最佳平衡点，成为数据冒险者们征服数据异世界的传说级利器。

亮点

可视化

支持单数据图表编辑、样式、设置、计算字段、筛选器、发布、分享、下载等
支持仪表板/大屏编辑、样式、辅助插件、标签页、联动、跳转、控制器、发布、分享、下载等
支持故事板编辑、设置、发布等
支持可扩展插拔新图表组

数据视图

支持视图SQL开发、测试、建模等
支持配置变量、列权限、并发策略

数据源

支持JDBC、FILE、HTTP数据源
支持datart服务端数据聚合
支持可扩展插拔新数据源

定时任务

支持定时邮件发送图表
支持定时微信发送图表

租户权限

支持基于组织租户管理
支持成员邀请、角色管理
支持基于所有资源（可视化/数据视图/数据源/定时任务）的成员/角色细粒度权限管理

体验

部署完成进入系统，首次使用需要注册，点击右下角“注册账号”：

点击注册之后，会收到确认邮件：

确认邮件并激活之后，就可以登入系统使用了

主导航栏在左侧，首页是可视化目录的展示页面，现在还没有内容，让我们来快速创建一些可视化吧。

点击主导航栏上的“数据源”菜单来创建一个mysql数据源，输入名称、选择数据源类型并填写所需的参数，点击“测试连接”，测试成功之后就可以保存了：

然后点击主导航栏上的“数据视图”菜单，来编辑一个数据视图。点击数据视图右上角的加号按钮，选择“新建数据视图”，中部的编辑器会创建一个新的页签：

在编辑器工具栏中选择刚刚创建的数据源，编写SQL，完成之后点击工具栏上的“执行”按钮，就可以在下方看到执行结果：

可以点击执行结果列头部的按钮来编辑字段类型和权限，编辑完成后，点击右上角的保存按钮保存数据视图：

接下来，开始创建数据图表和仪表板，点击主导航栏的“可视化”菜单进入可视化目录，并点击目录右上角的加号进行创建。

我们先创建一个公共数据图表：

创建完成后，在目录上选中刚创建的数据图表，右侧区域会显示该图表，由于刚创建还没有内容，点击右上角的编辑按钮进行编辑：

进入编辑界面后，在左上角选择刚才创建的数据视图，出现字段之后，将字段拖拽到中间的“数据”栏中来制作图表：

在中间的“样式”栏中可以编辑图表的显示样式：

点击右上角保存，一张简单的公共数据图表就制作好了。

下面我们来创建一个仪表板，和数据图表的步骤一样，先点击目录右上角的加号，在目录上创建一个仪表板，仪表板可以选择“自动”和“自由”两种布局模式，不同的布局模式适合不同的使用场景；我们先创建一个自动布局的仪表板，同样，创建完成后在目录上选中它，然后在右侧区域点击编辑按钮来进行编辑：

在编辑界面，我们可以将刚刚创建的公共数据图表添加到仪表板中来，也可以直接在仪表板内创建数据图表：

一番操作，一个简单仪表板就制作出来了：

我们可以在左侧目录上选择刚创建的数据图表和仪表板来预览，同时可以在右侧区域顶部点击页签来快速切换：

接下来我们创建一个故事板，来演示刚刚创建的可视化作品。点击左上角的“演示”菜单，目录会切换为故事板列表，点击加号创建一个故事板，和仪表板一样，创建完成后在右侧点击编辑按钮来制作故事板：

点击左上角的加号按钮添加刚才创建的仪表板，并设置过渡动画，一个故事版就做好了。点击播放按钮，就可以播放刚才制作好的故事版了：

以上是 datart 创建可视化作品的一个简单演示，作为一个开源项目，最重要的当然还是它的开放能力，datart 支持用户自定义图表插件，无需重新编译前端代码就可以集成到系统里进行使用，下面介绍怎样简单制作一个自定义图表插件：

首先，我们从选择一个绘图引擎开始，如EChartJS是一个图表绘图引擎，而D3JS则是一个更纯粹的绘图引擎。datart很多图表是基于EChartJS的封装，当然也有很多其他优秀的绘图引擎可以选择，兼收并蓄是datart插件化的核心理念。

一个最基本的插件主要由以下几部分组成：

图表设置配置项（可选项，定制化图形渲染配置以及基于数据视图的配置项）
图表元信息（包含图表名称、图标信息等）
图表依赖类库（第三方资源类库或CSS样式）
图表生命周期函数（datart回调函数，函数中包含Dom Document，当前图表宽高等信息）

接下来，下面我们以D3JS为例来绘制一个散点图：

 function D3JSScatterChart() { //【可选】扩展配置图表功能，可配合`数据视图`对数据处理 config: {}, //【必须】加载D3JS绘图引擎，此处只需给出CDN的链接即可，Datart会负责加载依赖。 dependency: ['https://d3js.org/d3.v5.min.js'], //【必须】设置图表的基本信息，icon可从Datart Icon图标中选取，暂时不支持自定义 meta: { id: 'demo-d3js-scatter-chart', name: '[Plugin Demo] D3JS 散点图', icon: 'star', }, //【必须】Datart提供的生命周期函数，其他周期如onUpdated，onResize以及onUnMount onMount(options, context) { // 通过Datart context获取当前的Dom对象 const host = context.document.getElementById(options.containerId); var margin = { top: 10, right: 40, bottom: 30, left: 30 }, width = context.width - margin.left - margin.right, height = context.height - margin.top - margin.bottom; //【以下内容可忽略】基于D3JS的绘制方法 this.chart = context.window.d3 .select(host) .append('svg') .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom) .append('g') .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); // ... 散点图绘图代码已省略，具体参数和使用请参考D3JS手册 }; }

有了这些基本配置，我们就可以将一个“静态”的散点图显示在datart的图表编辑器界面中并使用了。如果想实现更多高级功能，定制丰富的图表样式、定制基于数据视图的数据配置、定制服务端请求参数，要做到这些需要了解接下来介绍的图表设置配置项（Chart Config）、datart工具类（DHelper）以及生命周期上下文（datart Context），更多配置信息请参考datart用户手册。

这里给出注释及完整代码：

 /** * Datart * * Copyright 2021 * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ function D3JSScatterChart({ dHelper }) { return { config: { datas: [ { label: 'metrics', key: 'metrics', required: true, type: 'group', }, { label: 'deminsion', key: 'deminsion', required: true, type: 'aggregate', }, ], styles: [ { label: 'common.title', key: 'scatter', comType: 'group', rows: [ { label: 'common.color', key: 'color', comType: 'fontColor', }, ], }, ], i18ns: [ { lang: 'zh-CN', translation: { common: { title: '散点图配置', color: '气泡颜色', }, }, }, { lang: 'en', translation: { common: { title: 'Scatter Setting', color: 'Bubble Color', }, }, }, ], }, isISOContainer: 'demo-d3js-scatter-chart', dependency: ['https://d3js.org/d3.v5.min.js'], meta: { id: 'demo-d3js-scatter-chart', name: '[Plugin Demo] D3JS 散点图', icon: 'sandiantu', requirements: [ { group: [0, 999], aggregate: 2, }, ], }, onMount(options, context) { if (!context.document) { return; } const host = context.document.getElementById(options.containerId); var margin = { top: 10, right: 40, bottom: 30, left: 30 }, width = context.width - margin.left - margin.right, height = context.height - margin.top - margin.bottom; // 初始化D3JS绘图区域 this.chart = context.window.d3 .select(host) .append('svg') .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom) .append('g') .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); }, onUpdated(options, context) { if (!options.dataset || !options.dataset.columns || !options.config) { return; } // 获取当前绘图区域的宽高 const clientWidth = context.window.innerWidth; const clientHeight = context.window.innerHeight; const margin = { top: 40, right: 40, bottom: 40, left: 40 }; const width = clientWidth - margin.left - margin.right; const height = clientHeight - margin.top - margin.bottom; // 获取散点图数据及配置 const { data, style } = this.getOptions(options.dataset, options.config); // 绘制基于百分比的横纵坐标轴散点图, 以下是D3JS绘图逻辑 var x = context.window.d3 .scaleLinear() .domain([0, 100]) // This is the min and the max of the data: 0 to 100 if percentages .range([0, width]); // This is the corresponding value I want in Pixel this.chart .append('g') .attr('transform', 'translate(0,' + height + ')') .call(context.window.d3.axisBottom(x)); // X scale and Axis var y = context.window.d3 .scaleLinear() .domain([0, 100]) // This is the min and the max of the data: 0 to 100 if percentages .range([height, 0]); // This is the corresponding value I want in Pixel this.chart.append('g').call(context.window.d3.axisLeft(y)); // Add 3 dots for 0, 50 and 100% this.chart .selectAll('whatever') .data(data) .enter() .append('circle') .attr('cx', function (d) { return x(d.x); }) .attr('cy', function (d) { return y(d.y); }) .style('fill', style.color) .attr('r', 7); this.chart.selectAll('whatever').style('color', 'blue'); }, getOptions(dataset, config) { // 当前服务端返回的数据集 const dataConfigs = config.datas || []; // 获取样式配置信息 const styleConfigs = config.styles; const groupConfigs = dataConfigs .filter(c => c.type === 'group') .flatMap(config => config.rows || []); // 获取指标类型配置信息 const aggregateConfigs = dataConfigs .filter(c => c.type === 'aggregate') .flatMap(config => config.rows || []); // 数据转换，根据Datart提供了Helper转换工具 const objDataColumns = dHelper.transfromToObjectArray( dataset.rows, dataset.columns, ); const data = objDataColumns.map(dc => { return { x: dc[dHelper.getValueByColumnKey(aggregateConfigs[0])], y: dc[dHelper.getValueByColumnKey(aggregateConfigs[1])], }; }); var xMinValue = Math.min(...data.map(o => o.x)); var xMaxValue = Math.max(...data.map(o => o.y)); var yMinValue = Math.min(...data.map(o => o.y)); var yMaxValue = Math.max(...data.map(o => o.y)); // 获取用户配置 const color = dHelper.getStyleValueByGroup( styleConfigs, 'scatter', 'color', ); return { style: { color, }, data: data.map(d => { return { x: ((d.x || xMinValue - xMinValue) * 100) / (xMaxValue - xMinValue), y: ((d.y || yMinValue - yMinValue) * 100) / (yMaxValue - yMinValue), }; }), }; }, }; }

最终效果图如下：