1. 自定义图表概述

自定义图表，是观远数据提供的一种开放式的可视化分析图表类型。用户可以基于观远后台强大的数据处理能力，再借助第三方的可视化能力，构建出自定义的数据可视化展现方式。使用自定义图表，可以让平台的可视化能力不局限于当前已有的图表类型，可以根据自己的实际场景，扩展出丰富多样的可视化类型。

观远数据支持两种不同的图表可视化编辑方式：「自定义图表」和「自定义图表 Lite」。

2. 自定义图表开发说明

创建自定义图表，需要使用到观远提供的可视化SDK扩展包，以及各类可视化图表库的使用，涉及到 JavaScript 的开发，需要用户有一定的前端开发能力。

观远数据自定义图表插件开发和打包的代码仓库地址：https://github.com/GuandataOSS/visualization-tool。您可以根据需要进行使用与扩展。

3. 自定义图表使用介绍

创建自定义图表，主要分为两大步骤：

• 数据准备

• 制作图表

3.1 数据准备

点击仪表板右上角的新建卡片，选择「自定义图表」，选择一个数据集。

进入自定义图表编辑页后，可以看到编辑页主要分为三个区域：数据视图列表、当前数据视图的编辑区、图表视图。

数据准备过程，与平常做可视化分析类似。可以在数据视图编辑区内，拖拽相应的维度和数值到对应的区域，准备好用来绘制图表的数据。

不同之处在于：自定义图表的数据，可来自多个数据视图（一个视图类似于一个卡片计算）。多个视图的数据信息将会以数组的形式，供给图表视图绘图所用。

3.2 制作图表

数据准备好后，我们切换到「图表视图」，可选择两种不同的图表可视化编辑方式，这里选择第一种「自定义图表」。

3.2.1 界面介绍

（1）各区域介绍

a. 自定义图表/自定义Lite图表：两种自定义图表编辑方式

b. 运行按钮：用于代码编写完成后，在「图表预览区」查看展示效果

c. 查看视图数据结构：展示从「数据视图」中获取的数据

d. HTML 代码区：代码编辑区，下文将详细介绍

e. CSS 代码区：代码编辑区，下文将详细介绍

f. JAVASCRIPT 代码区：代码编辑区，下文将详细介绍

g. 图表预览区

（2）代码编辑区

「自定义图表」的代码编辑区包括：HTML 代码区、CSS 代码区、JAVASCRIPT 代码区。

如下图所示，当我们首次进入「图表视图」时，代码编辑区内会存在一些默认代码，而且在图表预览区，会以表格形式展示「数据视图」的数据。同时，每个区域支持拖动和最大化。

• HTML 代码区：

主要用于定义图表渲染的容器以及图表渲染时需要引用的图表库；

• CSS 代码区：

静态样式设置。一般情况下不需要进行额外修改，容器的自适应可在此处进行设置。不支持 SCSS/LESS 这类预处理类语言，只支持原生 CSS；

• JAVASCRIPT 代码区：

主要用于图表数据的接入与具体渲染动作设置；

如下，在书写或者替换 JAVASCRIPT 中的内容时，需要书写在 function renderChart 下的「/* ------ Custom Code Start ------ */」与「/* ------ Custom Code End ------ */」中间。

// 观远自带的渲染函数，一般不用去修改
function renderChart (data, clickFunc, config) {
/* ------ Custom Code Start ------ */
// 这里是你的代码书写位置
/* ------ Custom Code End ------ */
}
// 观远的插件代码，用于控制最终的图表渲染
new GDPlugin().init(renderChart)

从5.6.0 版本开始， renderChart函数新增utils 函数，支持调用utils.refreshData() 来触发卡片数据刷新（会从后端服务器中重新获取数据）。 

若期望传入参数不满足条件时在图表区域进行提示，则可以按照如下方式自定义提示：

function renderChart (data, clickFunc, config) {
    if(data[0].length === 0) {
        const dom = document.getElementById('container')
        dom.innerHTML = "
数据为空"
        return
    }
}

3.2.2 可访问的数据和函数

javascript
function renderChart (data, clickFunc,config) {
    /* ------ Custom Code Start ------ */
    // ...custom code for render chart
    /* ------ Custom Code End ------ */
}
new GDPlugin().init(renderChart)

该部分代码跟SDK相关的部分说明如下：

GDPlugin

GDPlugin类，负责数据通讯及调用图表绘制方法；

init

init，接收一个renderChart函数，GDPlugin 会在接收到数据后调用 renderChart， 提供三个入参（data, clickFunc，config）；

data

data，指「数据视图」中所选字段对应的数据。可通过「查看视图数据结构」，预览具体数据。格式如下：

[
  [
    {
      "name": "大区",
      "numberFormat": null,
      "data": [
        "其它",
        "华东",
        "西南",
        "华南",
        "华中",
        "华北"
      ]
    },
    {
      "name": "销售金额",
      "numberFormat": null,
      "data": [
        4916842,
        4290262,
        3157709.5,
        3037943.5,
        2167815,
        858516
      ]
    }
  ]
]

clickFunc

clickFunc，接受一个参数，用来支持自定义图表发起的联动、跳转等交互信息。格式如下：

function clickFunc(data) {}
// data 的格式如下：
{
 clickedItems: [ {
   idx: [ 1, 2 ], // 列的index路径。eg. 第二个视图数据集的第三列 [ 1, 2 ]
    colName: 'xxx', // 列名称
    value: [ 'xxx', 'yyy' ], // 值格式
  } ]
}

config

config，图表属性设置，目前包含 theme, colors, customOptions, language 四个属性；

const { theme, colors, customOptions, language } = config

• theme：当前系统主题色，对应的值包含「LIGHT」和「DARK」。

• colors：主题颜色，在「数据视图」右侧可配置，对应一个数组，格式如下：

[
  "#4379CE",
  "#99B8F1",
  "#FADB37",
  "#FC8602",
  "#FFA748",
  "#72B5EB",
  "#78CDED",
  "#AC9AE2",
  "#FAC36F",
  "#FD7F7F",
]

• customOptions：自定义配置化设置，支持自定义图表的配置化，方便插件安装后更好的对图表进行设置。

// customOptions 为一个对象，字段可根据图表去自行定义，然后使用
{
  showLabel: false,
  fontSize: 12,
}

• language：当前系统使用语言（5.6.0 版本支持）。

3.2.3 联动交互

自定义图表可以用 highcharts 实现带联动能力的蝴蝶图。代码如下：

javajavascript
const DEDAULT_COLORS = ['#2f7ed8', '#f28f43', '#1aadce', '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a']
const DEFALUT_THEME = 'LIGHT'
const chart = Highcharts.chart("container", {
    chart: {
        type: "bar"
    },
    title: {
        text: null
    },
    xAxis: [
        {
            categories: [],
            reversed: false,
            labels: {
                step: 1
            }
        }
    ],
    yAxis: {
        title: {
            text: null
        }
    },
    plotOptions: {
        series: {
            stacking: "normal",
        }
    },
    series: []
});
function renderChart(data, clickFunc, config) {
   /* ------ Custom Code Start ------ */
    if (!data || data[0].length