Zingchart는 X 축을 시간이 아니라 시간으로 플로팅합니다.

실제 날짜가 아닌 Timespans (경과 시간)를 나타내는 X 축을 사용하여 데이터를 플롯하려고합니다.Zingchart는 X 축을 시간이 아니라 시간으로 플로팅합니다.

시간 :

내가 다음 (문자열) 값으로 시리즈가 "0시 0분 0초", "0시 1분 0초", "0시 10분 0초", "0시 11분 : 00 "

내가 (INT)로이 값을 구문 분석

시간 : 0, 6000, 60000, 66000

하지만 그래프를 그릴 때, 시간 필드가 잘못된 것입니다. "0"또는 "00"대신 "2"가 표시됩니다. 분과 초가 잘 보입니다.

여기 내 json 코드입니다. 여전히 사항 날짜 및 시간을 처리하지 반면,

// Description of the graph to be displayed 
vm.chartJson = { 
    type: 'line', 
    scaleX: { 
     transform: { 
     type: 'date', 
     all: '%H:%h:%G:%g:%i:%s' 
     } 
    }, 
    series: [{ values: data }] 
};

가 어떻게이 시간 필드를 표시 할 수 있습니다 내가 성공하지, 시간 필드와 함께 연주? 총 시간이 24 시간을 넘으면 어떻게 될까요? 총 시간 수를 표시하거나 하루 필드를 추가해도 괜찮습니다. 예 : "124 : 22 : 01"또는 "5 : 4 : 22 : 01"

내가주의 수

출처

2017-02-06 corentinaltepe

tooltips

내가 문제를 해결하기 위해 무슨 짓을 :

// Determine the format of x-axis 
var format = '%i:%s'; 
if (data[data.length - 1][0] >= 3600000) format = '%G:%i:%s'; 

// Description of the graph to be displayed 
vm.chartJson = { 
    type: 'line', 
    scaleX: { 
    transform: { 
     type: 'date', 
     all: format 
    } 
    }, 
    series: [{ values: data }], 
    "utc": true, 
    "timezone": 0 
};

내가 24보다 더 많은 시간을 표시 할 수 없습니다를, 그래서 필요하다면 나는 일 표시 할 수 있습니다.

출처

2017-02-06 19:22:09 corentinaltepe

한 가지 문제는 우리가 밀리 초 단위의 시간이 걸릴 것입니다 감사합니다. 그래서 1 분 = 60000 밀리 초. 이것은 첫 번째 문제 일 수 있습니다. 모든 가치관의 끝까지 0 점을 집어 넣으십시오.

두 번째 문제는 로컬 컴퓨터의 표준 시간대가 사용 중이며 내 것이 다르다고해서 시간을 정확히 복제 할 수 없다는 것입니다. 우리는 이것을 설명하는 속성을 가지고 있지만, 필요하지 않을 수도 있습니다. 더 자세히 읽으십시오.

네이티브 라이브러리에 124 시간을 표시 할 수 없습니다. 입력 데이터에 따라 사용자 정의 x 축 레이블과 토큰을 사용하여 값을 형식화하고 플롯 할 수 있습니다. 이미 원하는 문자열 형식을 사용하고있는 것 같으므로 계속 사용하지 않는 것이 어떻습니까?

var customLabels = ['00:00:00', '00:01:00', '00:10:00','00:11:00']; 
 
var myConfig = { 
 
    \t type: 'line', 
 
    scaleX: { 
 
    labels: customLabels 
 
    }, 
 
    tooltip: { 
 
    textAlign: 'left', 
 
    text: '%kl<br>OR<br>%data-dates: %v' 
 
    }, 
 
\t series: [ 
 
\t \t { 
 
\t \t \t values: [475, 420, 400, 500], 
 
\t \t \t dataDates: customLabels, // one for each point in values array 
 
\t \t } 
 
\t ] 
 
}; 
 

 
zingchart.render({ 
 
\t id: 'myChart', 
 
\t data: myConfig, 
 
\t height: '100%', 
 
\t width: '100%' 
 
});

html, body { 
 
\t height:100%; 
 
\t width:100%; 
 
\t margin:0; 
 
\t padding:0; 
 
} 
 
#myChart { 
 
\t height:100%; 
 
\t width:100%; 
 
\t min-height:150px; 
 
} 
 
.zc-ref { 
 
\t display:none; 
 
}

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <script src= "https://cdn.zingchart.com/zingchart.min.js"></script> 
 
\t </head> 
 
\t <body> 
 
\t \t <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div> 
 
\t </body> 
 
</html>

상대 문서 :

demo link

tokens. 그리드의 세 번째 아래쪽은 data-으로 시작하는 맞춤 토큰입니다. 여기

scales

출처

2017-02-06 17:23:14 nardecky

Hu Nardecky. 답장을 보내 주셔서 감사합니다. 그것은 나의 현지 시간에 참으로 문제이었다. 1970 년 1 월 1 일 제 컴퓨터의 시간은 벌써 새벽 2시였습니다. 따라서 2.X 축의 눈금을 잃어 버리기 때문에 You 솔루션이 적합하지 않습니다.마치 0과 1 분 사이의 시간이 1 분과 10 분 사이 인 것처럼 보입니다. – corentinaltepe

Zingchart는 X 축을 시간이 아니라 시간으로 플로팅합니다.

답변

관련 문제