Цветная гистограмма в реальном времени

Я хочу отображать информацию об освещении в реальном времени.

У меня есть файл журнала, содержащий серию 1 и 0. Каждый из них представляет свет. Этот файл обновляется каждую секунду.

Я хотел бы отобразить это в виде горизонтальной гистограммы.

Эта диаграмма будет обновляться каждую секунду «блоками», представляющими 1 секунду. Если горит свет, блок будет зеленым, а следующий приближающийся блок останется зеленым, пока не погаснет. Затем ближайшие блоки красные.

В левой части диаграммы новые данные будут появляться каждую секунду, остальные данные сдвигаются вправо.

Цвет должен быть не на ВСЕЙ диаграмме, а только на соответствующем блоке.

Я узнал о директиве angular-chart, но не могу найти способ выполнить то, что хочу. (Да, я использую 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 ячеек, и я не могу отобразить столько ячеек.


javascript charts chart.js angularjs angular-chart
person Weedoze    schedule 30.06.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

В конце концов, я сделал это с помощью стола. Индикаторы обновляются с моего контроллера каждую секунду. У каждого источника света есть массив цветов, содержащий число - каждое число имеет свой цвет.

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

Он не такой красивый, как график, но он делает то, что я хотел.

person Weedoze    schedule 06.07.2016