Графическая диаграмма в реальном времени

Я хотел бы отображать информацию о времени в реальном времени.Графическая диаграмма в реальном времени

У меня есть файл журнала, содержащий номер 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>

Как использовать штабелируемую гистограмму с другим цветом?

ДУМАТЬ EDIT

библиотека Диаграмма может быть, не самая лучшая идея. Я думал об использовании простой таблицы с предельным числом столбцов. Визуальное обновление в реальном времени будет менее хорошим.

О ChartJS, я не могу найти способ определить цвета стекируемых блоков. Я могу добавить динамически данные, но блок получить случайные цвета

PROGRESS EDIT

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]); 

}

На данный момент мой график обновляется каждый раз, когда я нажимаю на b utton (для имитации обновления в реальном времени). Мне просто нужно покрасить новые данные. Есть ли способ нажать объект, содержащий значение (которое всегда равно 1 для 1сек) + цвет?

EDIT: Попытка со столом

В таблице не хорошее решение. Каждая ячейка представляет 1 сек и 1 цвет. Если я хочу отобразить исторический в течение 2 минут, мне нужно 120 ячеек, и я не могу отображать столько ячеек.

источник

2016-06-30 Weedoze

I finnaly сделал это используя стол. Световые сигналы обновляются с моего контроллера каждую секунду. Каждый свет имеет цвета массив, содержащий номер - каждый номер имеет свой цвет

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

Это не так красиво, как графика, но это делает что я хотел сделать

источник

2016-07-06 13:48:19 Weedoze

Графическая диаграмма в реальном времени

ответ

Смежные вопросы