我想显示有关灯光的实时信息。
我有一个包含1和0系列的日志文件。每个代表一个灯。该文件每秒更新一次。
我想将此显示为水平条形图。
该图表将每秒更新一次，其中“块”代表1秒。如果指示灯亮着，则该块将为绿色，并且下一个即将到来的块将保持绿色直到熄灭。然后，即将到来的块是红色的。
在图表的左侧，新数据将每秒出现一次，将其余数据推向右侧。
颜色不应在所有图表上，而应仅在相应的块上。
我发现了关于角度图表指令的信息，但是找不到找到想要实现的目标的方法。 （是的，我正在使用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>
如何使用不同颜色的可堆叠条形图？
思维编辑
图表库可能不是最好的主意。我考虑过使用一个具有有限列数的简单表。实时更新的视觉效果将较差。
关于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）+颜色的对象？
编辑：尝试表
该表不是一个好的解决方案。每个单元代表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>
每秒由显示为
table-cell的小div表示.status-box {
width: 1rem;
height: 2rem;
margin-right: 0.5rem;
display: table-cell;
}
它不像图表那么漂亮，但是可以满足我的需求
关于javascript - 实时彩色条形图，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38125528/