前言
各位读者好，截止目前，ThingsBoard系列文章已经做了十篇，分别是
ThingsBoard教程（一）：ThingBoard介绍及安装
ThingsBoard教程（二）：租户，租户配置，部件组模块的使用
ThingsBoard教程（三）：系统设置模块的使用
ThingsBoard教程（四）：规则链简介与操作
ThingsBoard教程（五）：客户，资产管理
ThingsBoard教程（六）：设备管理
ThingsBoard教程（七）：模拟设备遥测
ThingsBoard教程（八）：自定义UI
ThingsBoard教程（九）：前端架构分析
ThingsBoard教程（十）：前端初级定制化
ThingsBoard教程（十一）：部件库的入门知识
ThingsBoard教程（十二）：部件库中使用echarts
ThingsBoard教程（十三）：部件的基本API解释
ThingsBoard教程（十四）：部件库基本JS函数API解释，及变量的使用，显示
ThingsBoard教程（十五）：部件库的点击事件
ThingsBoard教程（十六）：制作RPC部件
上一篇我们讲解了tb的RPC组件的开发，讲的比较简单，算是一个比较入门的实验，主要是为了引领大家快速搭建一个RPC组件，进行调试。互发消息。那么本期的文章我们就来试着开发一个 时间图表（以时间为横坐标的图表）。最终效果是这样的。
在这个示例中，将使用外部Chart.js库创建时间序列折线图小部件。
在Widgets Bundle视图中，单击屏幕右下角的大“+”按钮，然后单击“创建新的小部件类型”按钮。单击选择小部件类型弹出窗口上的时间序列按钮。该控件编辑器将被打开，预填充有默认的内容时间序列模板控件。
下面就让我们开始吧
html编写 与js资源的引入
将 js的资源链接 填入到 资源tab页签下
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js
在HTML的页签下，写入以下内容
<canvas id=”myChart”></canvas>一个 id 为 myChart 的canvas的元素
其他的地方不用修改，下面我们来完成js部分的编写。
JavaScript 逻辑实现
var myChart; self.onInit = function() { var chartData = { datasets: [] }; for (var i=0; i < self.ctx.data.length; i++) { var dataKey = self.ctx.data[i].dataKey; var dataset = { label: dataKey.label, data: [], borderColor: dataKey.color, fill: false }; chartData.datasets.push(dataset); } var options = { maintainAspectRatio: false, legend: { display: false }, scales: { xAxes: [{ type: time, ticks: { maxRotation: 0, autoSkipPadding: 30 } }] } }; var canvasElement = $(#myChart, self.ctx.$container)[0]; var canvasCtx = canvasElement.getContext(2d); myChart = new Chart(canvasCtx, { type: line, data: chartData, options: options }); self.onResize(); } self.onResize = function() { myChart.resize(); } self.onDataUpdated = function() { for (var i = 0; i < self.ctx.data.length; i++) { var datasourceData = self.ctx.data[i]; var dataSet = datasourceData.data; myChart.data.datasets[i].data.length = 0; var data = myChart.data.datasets[i].data; for (var d = 0; d < dataSet.length; d++) { var tsValuePair = dataSet[d]; var ts = tsValuePair[0]; var value = tsValuePair[1]; data.push({t: ts, y: value}); } } myChart.options.scales.xAxes[0].ticks.min = self.ctx.timeWindow.minTime; myChart.options.scales.xAxes[0].ticks.max = self.ctx.timeWindow.maxTime; myChart.update(); }主要使用了三个组件的生命周期
onInit 用于初始化图表
onResize 用于在窗口改变大小后，重新绘制图表
onDataUpdated 监听数据更新，数据更新后重新渲染数据，将最新的数据渲染到页面上。
例子中，使用了外部 JS 库 API，在资源部分注入相应的 URL 后变得可用。最初使用来自ctx 的data属性的配置数据键准备图表
数据集。在onDataUpdated函数中，datasources 将数据转换为 Chart.js 折线图格式并推送到图表数据集。请注意，xAxis（时间轴）仅限于从ctx 的timeWindow属性获得的当前时间窗口边界。
这里需要注意的是 订阅数据的格式一定要正确。 不知道数据格式就无法处理数据，封装成图表的使用的数据格式。
self.ctx.data[i] ，timeWindow ， self.ctx.data[i].dataKey 这些对象都需要知道代表着什么。
如果不清楚的可以打印出来看看。
此外有关charts.js 的使用文档可以查看该网站 http://chartjs.cn/
将js内容填入后，点击运行，就能看到部件的效果了，如下图。
文档参考
图表折线图使用示例
var data = {
labels: [“January”, “February”, “March”, “April”, “May”, “June”, “July”],
datasets: [
{
label: “My First dataset”,
fillColor: “rgba(220,220,220,0.2)”,
strokeColor: “rgba(220,220,220,1)”,
pointColor: “rgba(220,220,220,1)”,
pointStrokeColor: “#fff”,
pointHighlightFill: “#fff”,
pointHighlightStroke: “rgba(220,220,220,1)”,
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: “My Second dataset”,
fillColor: “rgba(151,187,205,0.2)”,
strokeColor: “rgba(151,187,205,1)”,
pointColor: “rgba(151,187,205,1)”,
pointStrokeColor: “#fff”,
pointHighlightFill: “#fff”,
pointHighlightStroke: “rgba(151,187,205,1)”,
data: [28, 48, 40, 19, 86, 27, 90]
}
]
};
