9. 可视化数据分析

9. 可视化数据分析

点击主页左侧的数据分析栏，即可打开数据分析模块。

数据集管理用于定义SQL查询数据集，这些数据将用作图表绘制；
图表管理用于定义图表类型，指定绘制图表所需要的数据集；
看板管理用于定义包含多个图表和其他元素的HTML页面，并最终展示给用户；

看板

看板使用原生的HTML网页作为看板模板，为看板模板中的任意

元素添加一个dg-chart-widget属性，并将属性值设置为一个图表ID，即将此

定义为一个图表组件元素。在展示看板时，所有的图表组件元素都将被绘制成它所指定的图表。

定义看板

在看板管理界面点击[添加]按钮，在打开页面中填写名称，然后在HTML模板编辑区内填写如下看板代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div dg-chart-widget="[a chart id]" style="width:300px;height:300px;"></div>
</body>
</html>

保存后，即完成了一个简单看板的定义。

注意：[a chart id]应设置为图表管理页面内的某个图表ID。

管理看板资源

在看板编辑界面，可以管理看板的HTML模板所使用的资源，比如图片、CSS、JS等。
例如，上传一个名称为bg.png的图片资源后，将它设置为看板的背景：

...
<style type="text/css">
.my-dashboard{
  background: url(bg.png);
}
</style>
...
<body class="my-dashboard">
...
</body>
...

内置看板资源

看板内置了一些资源库，这些资源库会在展示看板时自动引入，具体包括：

jquery-1.12.4.js
echarts-4.6.0.js
datagear-chartFactory.js

图表支持库，变量名为：window.chartFactory
具体API参考：
http://[DataGear服务地址]/static/script/datagear-chartFactory.js
datagear-dashboardFactory.js

看板支持库，变量名为：window.dashboardFactory
具体API参考：
http://[DataGear服务地址]/static/script/datagear-dashboardFactory.js
datagear-chart-util.js

已被datagear-chartFactory.js代替，会在未来版本中移除
datagear-dashboard-renderer.js

已被datagear-dashboardFactory.js代替，会在未来版本中移除

看板主题

看板内置了两个CSS样式类：dg-dashboard、dg-chart，它们与系统肤色匹配，可将它们应用于HTML模板中，以支持看板主题，使用方式如下所示：

...
<body class="dg-dashboard">
...
<div class="dg-chart" dg-chart-widget="..."></div>
...
</body>
...

导入看板

在看板管理界面点击[导入]按钮，即可将任意HTML导入为看板模板。导入文件可以是单个HTML文件，也可以是包含HTML文件及其依赖所有资源的ZIP压缩包。例如：

index.html

或者

my-dashboard.zip

  |--index.html
  |--conent.html
  |--style
      |--dashboard.css
  |--images
      |--bg.png
      |--icon.png
  |--script
      |--dashboard.js

自定义图表展示选项

在图表组件HTML元素上定义dg-chart-options属性，即可设置此图表的展示选项。例如：

设置指定echarts图表不显示标题、图例顶部对齐、坐标系间隔顶部40像素：

...
<div dg-chart-widget="..." dg-chart-options="{title:{show:false},legend:{top:0},grid:{top:40}}"></div>
...

设置指定标签卡图表不显示名称、或者标签值在前：

...
<div dg-chart-widget="..." dg-chart-options="{showName:false}"></div>
...
<div dg-chart-widget="..." dg-chart-options="{valueFirst:true}"></div>
...

在body元素上定义dg-chart-options属性，可设置全局图表展示选项。例如：

设置所有echarts图表的图例靠左显示：

...
<body dg-chart-options="{legend:{left:0}}">
...

设置地图图表

在看板中添加的地图图表，默认只展示中国地图。如果要使用其他地图，则需要设置图表组件HTML元素上的dg-chart-options属性。例如，设置为北京地图：

...
<div dg-chart-widget="..." dg-chart-options="{series:[{map:'北京'}]}">
...

系统内置支持的地图如下表所示：

china、中国	china-contour、中国轮廓	china-cities、中国城市	world、世界
anhui、安徽	aomen、澳门	beijing、北京	chongqing、重庆
fujian、福建	gansu、甘肃	guangdong、广东	guangxi、广西
guizhou、贵州	hainan、海南	hebei、河北	heilongjiang、黑龙江
henan、河南	hubei、湖北	hunan、湖南	jiangsu、江苏
jiangxi、江西	jilin、吉林	liaoning、辽宁	neimenggu、内蒙古
ningxia、宁夏	qinghai、青海	shandong、山东	shanghai、上海
shanxi、山西	shanxi1、陕西	sichuan、四川	taiwan、台湾
tianjin、天津	xianggang、香港	xinjiang、新疆	xizang、西藏
yunnan、云南	zhejiang、浙江

在body元素上定义dg-chart-map-urls属性，可以扩展或替换内置地图。例如：

...
<body dg-chart-map-urls="{customMap:'map/custom.json'}">
...
<div dg-chart-widget="..." dg-chart-options="{series:[{map:'customMap'}]}">
...

在展示看板时，会自动加载看板资源map/custom.json作为地图。

自定义图表主题

在body元素上定义dg-chart-theme属性，即可自定义图表主题。例如：

...
<body dg-chart-theme="{
      //前景颜色
      color:'#FFF',
      //背景颜色
      backgroundColor:'#000',
      //边框颜色
      borderColor:'#333',
      //标题颜色
      titleColor:'#FFF',
      //图例颜色
      legendColor:'#BBB',
      //坐标轴颜色
      axisColor:'#AAA',
      //坐标轴刻度分隔线颜色
      axisScaleLineColor:'#555',
      //图形条目颜色
      graphColors:['#5EF6FE','#91CA8C','#EA7E53'],
      //值域图形条目颜色
      graphRangeColors:['#00FF00','#0000FF'],
      //提示框主题
      tooltipTheme:{color:'#FFF',backgroundColor:'#000',borderColor:'#333'},
      //高亮块主题
      highlightTheme:{color:'#FFF',backgroundColor:'#000',borderColor:'#333'}
    }">
...

也可以使用echarts主题更精细地定义图表主题，在body元素上定义dg-echarts-theme属性，并将其值设置为一个已注册至echarts的主题名即可。例如：

...
<script type="text/javascript">
echarts.registerTheme("myTheme", {...});
</script>
...
<body dg-echarts-theme="myTheme">
...

自定义图表

新建图表时，将图表类型设置为自定义，即可自定义图表渲染逻辑。

自定义图表不能单独展示，需要将其添加到看板中，并在对应图表组件HTML元素上定义dg-chart-renderer属性，然后将这个属性值设置为一个作为此图表渲染器的JS对象名（此图表渲染器对象与下面自定义图表插件的chartRenderer格式和用法一致）。

例如：

...
<script type="text/javascript">
var myChartRenderer=
{
  render: function(chart)
  {
    chart.elementJquery().append("<div>render custom chart</div>");
  },
  update: function(chart, results)
  {
    chart.elementJquery().append("<div>update custom chart</div>");
  }
};
</script>
...
<div dg-chart-widget="..." dg-chart-renderer="myChartRenderer"></div>
...

自定义图表插件

编写插件

新建一个UTF-8编码的plugin.json文件，格式为：

{
  id: "...",                //插件唯一标识
  nameLabel: "...",         //插件展示名称
  dataSigns:                //插件的数据标记定义，用于新建图表时标记数据
  [
    {
      name: "...",          //数据标记名
      nameLabel: "...",     //数据标记展示名
      required: ...,        //是否必须标记
      multiple: ...         //是否可多次标记
    },
    ...
  ],
  chartRenderer:            //图表渲染器
  {
    asyncRender:            //声明render函数是否为异步，可选，默认为false
    true || false || function(chart){ return true || false },
    render: function(chart)
    {
      ...                   //这里编写初始化图表元素JS代码
      //chart.elementJquery().append("render");
    },
    asyncUpdate:            //声明update函数是否为异步，可选，默认为false
    true || false || function(chart, results){ return true || false },
    update: function(chart, results)
    {
      ...                   //这里编写更新图表数据JS代码
      //chart.elementJquery().append("update");
    }
  }
}

将上述plugin.json文件添加到以其id值命名的ZIP压缩包内，例如：

my-chart-plugin-line.zip

  |--plugin.json

注意：如果chartRenderer.asyncRender返回true，那么在chartRenderer.render函数中完成异步操作后，应该调用chart.statusPreUpdate(true);，表明已完成render。

注意：如果chartRenderer.asyncUpdate返回true，那么在chartRenderer.update函数中完成异步操作后，应该调用chart.statusUpdated(true);，表明已完成update。

chart对象上定义了很多有用的函数，包括获取图表元素、绘制echarts图表、获取指定数据标记（上述dataSigns定义的项）的数据、以及其他图表相关的常用API。
具体参考datagear-chartFactory.js中的chartBase.***函数说明。

上传插件

以管理员账号登录系统后，点击主页右上角的按钮，点击弹出菜单中的上传图表插件条目，打开上传页面后，将上述的自定义图表插件ZIP压缩包上传即可。
使用插件

在图表管理页面点击[添加]按钮，选择上述自定义的图表插件，新建图表即可。

图表渲染器参数结构

图表插件的chartRenderer.render、chartRenderer.update函数参数结构如下所示：

chart（当前图表对象）

{
  id: "...",                        //图表ID
  name: "...",                      //图表名称
  elementId: "...",                 //用于渲染图表的HTML元素ID
  chartDataSets: [...],             //图表数据集数组
  updateInterval: ...,              //图表更新间隔毫秒数值，-1 不更新；0 实时更新；>0 间隔更新
  renderContext: {...}              //图表渲染上下文
  ...                               //其他，具体参考datagear-chartFactory.js中的chartBase.***函数说明。
}

chart.chartDataSets[i]

{
  dataSet:                         //数据集
  {
    id: "...",                     //数据集ID
    name: "...",                   //数据集名称
    properties:                    //数据集属性数组（SQL查询结果列信息数组）
    [
      {
        name: "...",               //属性名
        type: "..."                //属性类型
      },
      ...
    ]
  },
  propertySigns:                   //针对上述数据集属性的标记
  {
    "...": ["...", ...],          //数据集属性名 -> 图表插件中定义的数据标记名称数组
    "...": ["...", ...],
    ...
  }
}

chart.renderContext

{
  attributes:
  {
    chartTheme: {...},             //默认图表主题，与上述自定义图表主题的"dg-chart-theme"结构相同
    renderStyle: "..."             //默认图表渲染风格："LIGHT" 浅色；"DARK" 暗色
  }
}

results（当前图表关联的数据集查询结果数组）

[
  {
    datas: [{...}, ...]            //chart.chartDataSets[i].dataSet对应的查询结果数组
  },
  ...
]

results[i].datas[j]

{
  "...": ...,                      //dataSet.properties[0].name -> 数据值
  "...": ...,                      //dataSet.properties[1].name -> 数据值
  ...
}