实时彩色条形图

Question

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

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

我想将其显示为水平条形图。

此图表每秒更新一次，"blocks" 代表 1 秒。如果灯在街区上，则为绿色，下一个即将到来的街区将保持绿色，直到它关闭。那么接下来的方块是红色的。

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

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

我找到了 angular-chart-directive，但我找不到方法来完成我想要的。（是的，我正在使用 AngularJS）

网上找不到例子（这种图表有名字吗？）

控制器

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

HTML

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

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

思考编辑

图表库可能不是最好的主意。我想过使用一个简单的 table 来限制列数。实时更新的画面会比较差

关于 ChartJS，我找不到定义可堆叠块颜色的方法。我可以动态添加数据但阻止获取随机颜色

编辑进度

HTML

<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）+ 颜色的对象？

编辑：尝试 table

table 不是好的解决方案。每个单元格代表 1 秒和 1 种颜色。如果我想显示2分钟的历史，我需要120个单元格，我不能显示那么多单元格。

Answer 1

我最后用 table 做到了。灯光每秒从我的控制器更新一次。每盏灯都有一个包含数字的颜色数组 - 每个数字都有其颜色

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

它没有图表那么漂亮，但它完成了我想做的事情

实时彩色条形图

Real time colored bar chart

javascript

charts

angularjs

chart.js

angular-chart