DataGear內置的60餘種圖表（折線圖、柱狀圖、餅圖、散點圖、雷達圖、地圖、桑基圖、K線圖、箱形圖、路徑圖等等），都是以圖表插件的形式提供的，當這些內置圖表無法滿足應用需求時，則可以通過自定義圖表或插件的方式，實現特定業務的數據可視化需求。
自定義圖表簡單快捷，缺點是僅能在其所處看板內使用，且只能繪製已知結構的數據；自定義圖表插件稍微複雜，卻可在整個系統內使用，並且可繪製符合特定規範的任意結構的數據。
在【DataGear 自定義數據可視化圖表】文章中，已經介紹了自定義圖表實現方式，本文將以折線圖爲例，介紹如何自定義圖表插件。
在開始之前，需要了解圖表插件的一個重要的概念：數據標記，它由名稱、是否必須等特性組成，用於定義圖表插件的數據規範。用戶在定義圖表時，將所選數據集的數據結構（數據集屬性）綁定圖表插件提供的數據標記，圖表插件則依據數據標記綁定信息，從數據集中提取數據，繪製圖表，從而實現數據結構解耦。
圖表插件由一個核心的plugin.json文件組成，它的結構規範參考官網文檔【自定義圖表插件】章節，自定義圖表插件的主要工作即是定義它的plugin.json文件。
首先，定義圖表插件ID、名稱基本信息：
//plugin.json
{
id: "my-line-chart",
nameLabel: "自定義折線圖"
}
折線圖的數據結構比較簡單：
名稱：折線數據點的名稱（橫座標）
數值：折線數據點的數值（縱座標）
因此，圖表插件的數據標記可定義爲：
//plugin.json
{
id: "my-line-chart",
nameLabel: "自定義折線圖",
dataSigns:
[
{
name: "name",
nameLabel: "名稱",
required: true,
multiple: false
},
{
name: "value",
nameLabel: "數值",
required: true,
multiple: true
}
]
}
上述數據標記中，name和value標記的required: true表示圖表的數據集必須爲其屬性綁定這兩個標記，name標記的multiple: false表示圖表的數據集僅能有一個屬性綁定它，value標記的multiple: true表示圖表的數據集可以有多個屬性綁定它，這樣插件可支持一個數據集裏包含多條折線數據。
例如，對於數據集：
COL_NAME, COL_VAL_0, COL_VAL_1
..., ..., ...
綁定了數據標記：
COL_NAME -> name（名稱）
COL_VAL_0 -> value（數值）
COL_VAL_1 -> value（數值）
那麼，它將被繪製爲兩條折線，COL_NAME列值將被繪製爲兩條折線共同的橫座標，COL_VAL_0列值將被繪製爲第一條折線的縱座標，COL_VAL_1列值將被繪製爲第二條折線的縱座標。
定義了數據標記後，下一步要做的是定義圖表渲染器，它的結構已在官網文檔【圖表渲染器】章節有說明，在【DataGear 自定義數據可視化圖表】文章中也有相關說明，這裏不再介紹。
圖表插件和自定義圖表的圖表渲染器有一個重要的不同，自定義圖表的圖表渲染器直接讀取數據構建圖表展示數據，而圖表插件的圖表渲染器則通過數據標記綁定信息讀取數據構建圖表展示數據，相關的圖表API如下所示（具體參考官網文檔【圖表對象】章節）：
chart.dataSetPropertyOfSign(chartDataSet, signName);
chart.dataSetPropertiesOfSign(chartDataSet, signName);
chart.resultNameValueObjects(result, nameProperty, valueProperty);
chart.resultValueObjects(result, valueProperty);
chart.resultMapObjects(result, propertyMap);
本例折線圖插件的圖表渲染器定義如下所示：
//plugin.json
{
id: "my-line-chart",
nameLabel: "自定義折線圖",
dataSigns:
[
{
name: "name",
nameLabel: "名稱",
required: true,
multiple: false
},
{
name: "value",
nameLabel: "數值",
required: true,
multiple: true
}
],
//圖表渲染器
chartRenderer:
{
render: function(chart)
{
var chartDataSet = chart.chartDataSetFirst();
var np = chart.dataSetPropertyOfSign(chartDataSet, "name");
var vps = chart.dataSetPropertiesOfSign(chartDataSet, "value");
var options = chartSupport.inflateRenderOptions(chart,
{
title:
{
text: chart.name
},
xAxis:
{
name: chart.dataSetPropertyAlias(chartDataSet, np),
type: "category"
},
yAxis:
{
name: (vps.length == 1 ? chart.dataSetPropertyAlias(chartDataSet, vps[0]) : ""),
type: "value"
},
series:
[
{
type: "line"
}
]
});
chart.echartsInit(options);
},
update: function(chart, results)
{
var chartDataSets = chart.chartDataSetsMain();
var legendData = [];
var series = [];
//圖表可關聯多個數據集
for(var i=0; i<chartDataSets.length; i++)
{
var chartDataSet = chartDataSets[i];
var dataSetName = chart.dataSetAlias(chartDataSet);
var result = chart.resultOf(results, chartDataSet);
var np = chart.dataSetPropertyOfSign(chartDataSet, "name");
var vps = chart.dataSetPropertiesOfSign(chartDataSet, "value");
for(var j=0; j<vps.length; j++)
{
var legendName = chart.dataSetPropertyAlias(chartDataSet, vps[j]);
var data = chart.resultNameValueObjects(result, np, vps[j]);
chart.originalInfo(data, chartDataSet);
var mySeries = {type: "line", name: legendName, data: data};
legendData.push(legendName);
series.push(mySeries);
}
}
var options = { legend: {data: legendData}, series: series };
options = chart.inflateUpdateOptions(results, options);
chart.echartsOptions(options);
}
}
}
在實現了圖表渲染器功能後，按照官網【自定義圖表插件】章節的步驟，將上述插件上傳至DataGear系統即可。
源碼地址：
Gitee：https://gitee.com/datagear/datagear