乐趣区

关于数据可视化:DataGear-自定义数据可视化图表

DataGear 内置了很多罕用的图表(折线图、柱状图、饼图、散点图、雷达图、地图等等),能满足大部分数据可视化需要,当内置图表无奈满足时,则能够通过自定义图表或插件的形式,实现特定业务的数据可视化需要。

自定义图表实现起来简略不便,只需为看板内的图表类型为【自定义】的 <div> 图表元素增加 dg-chart-renderer 属性(图表渲染器),并实现其逻辑即可;自定义图表插件则稍简单些,须要编写独自的插件包,并上传至零碎,之后则可在整个零碎内复用。

本文次要解说自定义图表实现形式。

在开始自定义之前,须要理解的是,零碎会为图表、看板展现页面主动引入 Jquery(window.$)ECharts(window.echarts) 等 JS 库(具体参考官网文档内置看板资源章节),能够在自定义图表和插件中间接应用它们。

上面,以折线图为例,介绍如何通过自定义图表形式实现。

假如有如下各月份销售额 CSV 数据集:

名称:

各月份销售额

数据:

month     sales
1 月       11
2 月       41
3 月       9
4 月       20
5 月       15
6 月       18

属性(预览后零碎主动解析而得,展现名称由用户选填):

名称        类型        展现名称
month       字符串      月份
sales       数值        销售额

假如有关联上述数据集,图表类型为 自定义 的图表:

名称:各月份销售额图表
图表类型:自定义
数据集:各月份销售额

自定义图表须要在看板内编写图表渲染器实现代码,因而,这里新建一个看板,并增加上述图表,内容如下:

<!DOCTYPE html>
<html>
<head>
...
<script type="text/javascript">
// 自定义图表渲染器
var myChartRenderer=
{

};
</script>
</head>
<body>
  <div dg-chart-renderer="myChartRenderer"
    dg-chart-widget="[上述图表 ID]"
    style="width:500px;height:300px;"><!-- 各月份销售额图表 --></div>
</body>
</html>

上面须要做的是实现 myChartRenderer 图表渲染器逻辑,它应至多实现如下两个函数(异步渲染、事件处理须要实现更多函数,具体参考官网文档图表渲染器章节):

{
  // 初始渲染图表
  //chart 图表对象
  render: function(chart){...},

  // 更新图表数据
  //chart 图表对象
  //results 要更新的数据集后果对象数组
  update: function(chart, results){...}
}

在实现上述两个函数之前,咱们须要先理解一下两个参数 chartresults的构造。

chart示意图表对象,它封装了要渲染图表的根本信息、及其关联的数据集信息(由 <div> 图表元素增加 dg-chart-widget 属性指定),在本例中,它的根本构造如下所示:

{
  name: "各月份销售额图表",
  // 图表关联的数据集信息,本例中只有一个
  chartDataSets:
  [
    {
      dataSet:
      {
        name: "各月份销售额",
        properties:
        [{name: "month", type: "STRING", label: "月份"},
          {name: "sales", type: "NUMBER", label: "销售额"}
        ]
      }
    }
  ],
  // 图表所处的 div 图表元素 ID,如果没有定义,零碎会随机生成一个,并主动设置为 div 图表元素的 id 属性
  elementId: "..."
}

除了上述根本构造,chart对象还定义了很多用于反对图表渲染、数据处理、事件处理等辅助 API(具体参考官网文档图表对象章节),上面是几个比拟根本的 API:

// 获取 div 图表元素 DOM 对象
chart.element()

// 获取 div 图表元素的 Jquery 对象
chart.elementJquery()

// 构建图表渲染 options
chart.inflateRenderOptions()

// 将图表初始化为 ECharts 图表,并返回 ECharts 实例对象
chart.echartsInit(options)

// 将图表原始数据集数据转换为名 / 值构造的数据
chart.resultNameValueObjects(result, nameProperty, valueProperty)

// 构建图表更新 options
chart.inflateUpdateOptions()

// 设置图表的 ECharts 选项
chart.echartsOptions(options)

results示意图表关联数据集的后果数据,与上述 chart 对象的 chartDataSets 数组元素一一对应,在本例中,它的构造如下所示:

[
  {
    data:
    [{month: "1 月", sales: 11},
      {month: "2 月", sales: 41},
      ...
    ]
  }
]

在理解 chartresults 参数构造后,就能够应用它们来实现 myChartRendererrenderupdate 函数了:

<!DOCTYPE html>
<html>
<head>
...
<script type="text/javascript">
var myChartRenderer=
{render: function(chart)
  {var chartDataSet = chart.chartDataSetMain();
    
    // 图表题目:"各月份销售额图表"
    var title = chart.name;
    // 图表 X 轴标签:"月份"
    var xAxisName = chart.dataSetPropertyAlias(chartDataSet, "month");
    // 图表 Y 轴标签:"销售额"
    var yAxisName = chart.dataSetPropertyAlias(chartDataSet, "sales");
    // 图例名、系列名:"各月份销售额"
    var seriesName = chart.dataSetAlias(chartDataSet);
    
    var options = chart.inflateRenderOptions(
    {title: { text: title},
      legend: {data: [ seriesName] },
      tooltip: {trigger: "axis"},
      xAxis: {name: xAxisName, type: "category", data: [] },
      yAxis: {name: yAxisName, type: "value"},
      series:
     [{
       name: seriesName,
       type: "line",
       data: []}]
   });
 
    // 初始化 ECharts
    chart.echartsInit(options);
  },
  
  update: function(chart, results)
  {var chartDataSet = chart.chartDataSetMain();
    var result = chart.resultOf(results, chartDataSet);
    
    // X 轴刻度:["1 月", "2 月", ...]
    var xAxisData = chart.resultRowArrays(result, "month");
    // 折线数据:[{name:"1 月", value: 11}, {name:"2 月", value: 41} ]
    var seriesData = chart.resultNameValueObjects(result, "month", "sales");
    
    var options = chart.inflateUpdateOptions(results,
    {xAxis: { data: xAxisData},
      series: [{ data: seriesData} ]
    });
    
    // 更新图表数据
    chart.echartsOptions(options);
  }
};
</script>
</head>
<body class="dg-dashboard">

<div class="dg-chart"
    dg-chart-renderer="myChartRenderer"
    dg-chart-widget="[上述图表 ID]"
    style="width:500px;height:300px;"></div>

</body>
</html>

自定义图表实现!成果如下图所示:

官网地址:http://www.datagear.tech

源码地址:

Gitee:https://gitee.com/datagear/datagear

Github:https://github.com/datageartech/datagear

退出移动版