ThingsBoard教程（十七）：自定义开发时间图表_专栏

前言

各位读者好，截止目前，ThingsBoard系列文章已经做了十篇，分别是

上一篇我们讲解了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]
            }
            ]
            };

ThingsBoard教程（十七）：自定义开发时间图表

前言

html编写 与js资源的引入

JavaScript 逻辑实现

文档参考

这把我C

审核成功

审核失败

html编写与js资源的引入