实时彩色条形图

Real time colored bar chart

本文关键字：条形图 彩色 实时      更新时间：2023-09-26

我想显示有关灯光的实时信息。

我有一个包含一系列1和0的日志文件。每一个代表一个光。此文件每秒钟更新一次。

我想把它显示为一个水平条形图。

这个图表将每秒钟更新一次，"块"表示1秒。如果灯亮着，这个街区将是绿色的，下一个街区将保持绿色，直到它关闭。接下来的方块是红色的

在图表的左侧，每秒钟都会出现新的数据，将剩余的数据推到右侧。

颜色不应该出现在所有的图表上，而应该只出现在相应的块上。

我找到了关于角图指令，但我找不到一种方法来完成我想要的。(是的，我正在使用AngularJS)

我在网上找不到例子(这种图表有名字吗?)

控制器

$scope.labels = ['A', 'B', 'C', 'D'];
$scope.data = [[59, 80, 81, 56]];


<canvas id="base" class="chart-horizontal-bar" chart-data="data" chart-labels="labels" ></canvas>

如何使用不同颜色的可堆叠条形图?

思维编辑

图表库可能不是最好的主意。我考虑使用一个列数有限的简单表。实时更新的视觉效果会差一些。

关于ChartJS，我找不到一种方法来定义可堆叠块的颜色。我可以动态添加数据但是block得到随机颜色

进步编辑 

<canvas id="base" class="chart-horizontal-bar" chart-data="data" chart-labels="labels" chart-options="options"></canvas> 
<button class="ui fluid button" ng-click="push()">PUSH</button>
控制器

$scope.labels = ['A', 'B', 'C', 'D'];
$scope.type = 'StackedBar';
$scope.options = {
    responsive:true,
    animation : false,
    scaleShowGridLines : false,
    scales: {
        xAxes: [{
          stacked: true,
        }],
        yAxes: [{
          stacked: true
        }]
    },
};

$scope.data = [];
$scope.push = function(){
    if($scope.data.length >= 10) //Do not show more than 10sec in past
        $scope.data.pop();
    $scope.data.unshift([1,1,1,1]);
}

目前，每当我点击按钮时，我的图表都会更新(以模拟实时更新)。我只需要给新数据上色。是否有一种方法可以推送一个包含值(在1秒内总是1)+颜色的对象?

EDIT: Trying with table

表不是一个好的解决方案。每个单元格代表1秒和1种颜色。如果我想显示2分钟的历史记录，我需要120个单元格，而我无法显示这么多单元格。

我最终使用了一个表。我的控制器每秒钟都会更新灯光。每个灯都有一个包含数字的颜色数组——每个数字都有自己的颜色

<table class="ui celled table" ng-hide="loadingLights">
    <tr ng-repeat="l in lights track by $index">
        <td style="width: 10%;">{{l.name}}</td>
        <td style="width: 90%;">
            <div ng-repeat-start="c in l.colors track by $index" class="status-box" ng-class="{'redStatus' : c == '0', 'greenStatus' : c == '2', 'orangeStatus' : c == '3'}"></div>
            <div ng-repeat-end class="empty-status-box"></div>
        </td>
    </tr>
</table>

每秒钟用一个小div表示，显示为table-cell 

.status-box {
    width: 1rem;
    height: 2rem;
    margin-right: 0.5rem;
    display: table-cell;
}

它不像图形那么漂亮，但它能达到我想要的效果

相关文章：