我想在thingsboard中创建我的线性时间序列小部件，但我需要一些默认版本中不包含的自定义功能。
Thingsboard提供的配置示例：
Chart.js库：https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js HTML画布：JS代码：

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();
}

字符串
和输出：
Thingsboard timeseries example的
正如你所看到的，X轴定义为时间，“First”和“Second”是ctx对象生成的数据源。

• 我需要什么？正如你所看到的，两个数据源的颜色永远不会改变，我想通过以下情况来改变颜色：如果值（Y轴> 50且< 70）且在6分钟（X轴）期间，那么如果值（Y轴> 70且< 90）且在6分钟（X轴）期间，那么颜色为橙子如果值（Y轴> 90）且在6分钟（X轴）期间，那么颜色为橙色，默认情况下，在此示例中，颜色将为灰色。
  我尝试使用Chart.js库创建图表并将其注入TB，但X轴与我预期的不一样，因为我需要与上图中显示的X轴相同的X轴。
  我也用另一个库Highcharts尝试过，但结果是这样的：HighCharts try的
  图书馆使用：https://cdnjs.cloudflare.com/ajax/libs/highcharts/10.3.3/highcharts.min.js的

self.onInit = function() {
    //self.ctx.flot = new TbFlot(self.ctx);
Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    plotOptions: {
        series: {
            color: {
                linearGradient: [500, 0, 100, 0],
                stops: [
                    [0, 'red'],
                    [1, 'green']
                ]
            }
        }
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});
}

型
我对JS的了解是基本的，我正在研究这个图表是如何为这个库工作的，但我不知道TB图表是如何工作的，只知道X轴是如何工作和更新的。
X轴更新方法：

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();
}```

Note: depending which version of the library we use this method changes.

If anyone who experimented or created before a custom timeseries chart in TB please let me know any useful information because from TB i didnt find to many helpful documentation.

PD: its my first time creating a question in StackOverflow

型