Question

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

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

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

此图表将每秒更新一次，代表1秒的“块”。如果灯亮，则该块将为绿色，下一个块将保持绿色直至其关闭。然后即将到来的街区是红色的。

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

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

我发现了角度图表指令，但我无法找到实现我想要的方法。（是的，我使用的是AngularJS）

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

CONTROLLER

$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>

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

思考编辑

图表库可能不是最好的主意。我想过使用一个带有极限列数的简单表。实时更新的视觉效果会不太好。

关于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>

CONTROLLER

$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）+颜色？

编辑：尝试使用表格

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

Answer 1

我最终用桌子做了。每秒钟都会从我的控制器更新灯光。每个灯都有一个包含数字的颜色数组 - 每个数字都有颜色

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

每秒由显示为table-cell

的小div表示

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

它没有图表那么漂亮，但它可以做我想做的事情

实时彩色条形图

1 个答案: