DataGear 6.0.0 新特性之本地图表

DataGear 数据可视化分析平台（datagear.tech）在新发布的6.0.0版本中，新增了看板API-2.0环境，相较于旧版的API-1.0环境，新增了诸多特性，其中之一即是本地图表。本地图表无需在【图表管理】模块中新建后才能使用，仅需在看板设计时通过dg-chart-local元素属性即可定义和使用。

本文以【基本折线图】内置图表插件（org.datagear.v2.line）为例，介绍如何定义和使用本地图表。

在看板设计页面点击【插入-图表（新建）】菜单，在打开的页面中点击【图表类型】右侧的【选择】按钮，可以查看系统内所有图表插件信息。

首先，在看板模板HTML内定义本地图表，如下所示：

javascript 复制代码

<script>
var localChart = {
  name: "本地图表",
  plugin: "org.datagear.v2.line",
  dataSetBinds: [{
    dataSet: {
    name: "数据集",
    fields: [
      { name: "NAME", type: "string" },
      { name: "VALUE", type: "number" }
    ],
    params:[
      { name: "count", type: "integer" }
    ]
  },
  fieldSigns: {
    "NAME": [ "name" ],
    "VALUE": [ "value" ]
  }
  }]
};
</script>

上述示例定义的本地图表，使用org.datagear.v2.line作为渲染图表插件，定义了一个包含NAME、VALUE字段、以及一个count参数的数据集，并将其NAME字段绑定了图表插件的name数据标记、VALUE字段绑定了图表插件的value数据标记。

然后，定义图表取数器函数，如下所示：

javascript 复制代码

<script>
var chartFetcher = function(context){
  var count = context.query.dataSetQueries[0].paramValues["count"];
  count = (count == null || count < 0 ? 10 : count);
  var data = [];
  for(let i=0; i<count; i++){
    data[i] = { "NAME": "地区-"+(i+1), "VALUE": Math.floor(Math.random()*100) };
  }
  var result = {
    dataSetResults:[{
    data: data
    }]
  };
  return result;
};
</script>

上述图表取数器，生成指定count参数个数的随机数据。图表取数器也是看板API-2.0环境的新特性，用于自定义图表数据源。

最后，定义本地图表元素即可：

html 复制代码

<div dg-chart-local="localChart" dg-chart-fetcher="chartFetcher" style="height:50vh;"></div>

关于本地图表dg-chart-local、图表取数器dg-chart-fetcher的详细用法，请参考看板元素属性章节内容。

本示例的完整看板模板HTML如下所示：

html 复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style  type="text/css">
html { height: 100%; }
*, ::after, ::before { box-sizing: border-box; }
</style>
<script>
var localChart = {
  name: "本地图表",
  plugin: "org.datagear.v2.line",
  dataSetBinds: [{
    dataSet: {
    name: "数据集",
    fields: [
      { name: "NAME", type: "string" },
      { name: "VALUE", type: "number" }
    ],
    params:[
      { name: "count", type: "integer" }
    ]
  },
  fieldSigns: {
    "NAME": [ "name" ],
    "VALUE": [ "value" ]
  }
  }]
};

var chartFetcher = function(context){
  var count = context.query.dataSetQueries[0].paramValues["count"];
  count = (count == null || count < 0 ? 10 : count);
  var data = [];
  for(let i=0; i<count; i++){
    data[i] = { "NAME": "地区-"+(i+1), "VALUE": Math.floor(Math.random()*100) };
  }
  var result = {
    dataSetResults:[{
    data: data
    }]
  };
  
  return result;
};
</script>
</head>
<body style="height:100%;margin:0;">
  <h1 style="text-align:center;margin:0;">DataGear 本地图表</h1>
  <div dg-chart-local="localChart" dg-chart-fetcher="chartFetcher" style="height:50vh;"></div>
</body>
</html>

示例效果图如下所示：

官网地址：

datagear.tech

文档地址：

datagear.tech/docs

源码地址：

Gitee：gitee.com/datagear/da...

Github：github.com/datageartec...