실시간 색상 막대 차트

조명에 대한 실시간 정보를 표시하고 싶습니다.실시간 색상 막대 차트

나는 1과 0의 일련 번호를 포함하는 로그 파일을 가지고 있습니다. 각각은 빛을 나타냅니다. 이 파일은 1 초마다 업데이트됩니다.

가로 막대 차트로 표시하고 싶습니다.

이 차트는 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]); 

}

가 내 차트가 업데이트 임의 색상

에게
PROGRESS 편집를 얻을 수 내가 b를 클릭 할 때마다 utton (실시간 업데이트 시뮬레이션). 새로운 데이터의 색상을 지정하면됩니다. 값 (항상 1 초 동안 1) + 색상을 포함하는 객체를 푸시하는 방법이 있습니까?

편집 : 테이블

표와 노력은 좋은 해결책이 아니다. 각 셀은 1 초 및 1 색을 나타냅니다. 2 분 동안 기록을 표시하려면 120 개의 셀이 필요하며 많은 셀을 표시 할 수 없습니다.

출처

2016-06-30 Weedoze

필자는 테이블을 사용하여 finnaly를 수행했습니다. 조명은 매 초 컨트롤러에서 업데이트됩니다. 각 광은 색을 포함하는 배열 번호를 갖는다 - 각각의 숫자는 table-cell 그것이 아름다운하지 않는하는 그래프로하지만

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

표시 초당가 작은 DIV 의해 표현된다

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

색상을 갖는다 내가 뭘하고 싶은지

출처

2016-07-06 13:48:19 Weedoze

실시간 색상 막대 차트

답변

관련 문제