2017-04-18 1 views
1

나는이 시리즈의 한 종류와 dygraphs를 구축하기 위해 노력하고있어에서 분산 및 customBars 결합 errorBars하지만 그것은 단지 표시 중 하나 수있는 것처럼 보인다 :는 Dygraphs

: 이것은 내 코드는

입니다

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="dygraph.js"></script> 
<link rel="stylesheet" src="dygraph.css" /> 
</head> 
<body> 

<div id="container" style="width:1000px; height:600px;"></div> 
<script type="text/javascript"> 

new Dygraph(
document.getElementById("container"), 
    [ 
     [new Date("2016/2/3"), [1,3,6], [4]], 
     [new Date("2016/3/3"), [1,3,6], [3]], 
     [new Date("2016/4/3"), [1,3,6], [1]], 
     [new Date("2016/5/3"), [1,3,6], [2]], 
     [new Date("2016/6/3"), [1,3,6], [6]], 
     [new Date("2016/7/3"), [1,3,6], [5]] 
    ], 
{ 
    labels: [ "Date", "SD" , "Scatter"], 
    showRangeSelector: true, 
    customBars: true, 
    drawPoints: true, 
    series: { 
     "SD" : { 

     }, 
     "Scatter" : { 
      customBars: false, 
      strokeWidth: 0.0 
     } 
    }, 
    includeZero: true 

} 
); 
</script> 
</body> 
</html> 

customBars가 주석 처리 된 경우 산점도가 표시됩니다. 그렇지 않은 경우 맞춤 막대가 표시됩니다. 둘 다 결코. 다음은 여기에 picture

있는 어떤 도움을 크게 JSfiddle

이해할 수있다! 감사합니다.

+0

안녕 @Justine, 나는 라이브러리가 설정되지 않은 dygraphs에 대한 참조로 JSfiddle를 실행할 수 없습니다. 어떤 버전을 사용하고 있습니까? 귀하의 예를 실행할 수 있도록 JSfiddle을 고칠 수 있습니까? 감사합니다 –

+0

좋아, 나는 외부 소스 https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.0.0/dygraph.css 및 https://cdnjs.cloudflare.com/ajax/libs/dygraph/를 추가했습니다. 2.0.0/dygraph.js이고 현재 작동 중입니다. 나는 해결책을 찾으려고 노력할 것이다;) –

답변

2

비표준 막대 그래프와 맞춤 막대 그래프를 혼합 할 수 있는지 확실하지 않습니다. 하지만 당신의 문제에 대한 다음 해결책을 찾았습니다. 사용자 정의 막대 영역이없는 사용자 정의 막대로 사용자 정의 막대없이 원하는 그래프를 만들지 마십시오. 아래에서 나는 당신에게 내 해결책을 남겨 둡니다. 나는 이것이 당신을위한 해결책이 될 수있는 희망

는)

new Dygraph(
 
    document.getElementById("container"), 
 
\t [ 
 
\t  [new Date("2016/2/3"), [1,3,6], [4,4,4]], 
 
\t  [new Date("2016/3/3"), [1,3,6], [3,3,3]], 
 
\t  [new Date("2016/4/3"), [1,3,6], [1,1,1]], 
 
\t  [new Date("2016/5/3"), [1,3,6], [2,2,2]], 
 
\t  [new Date("2016/6/3"), [1,3,6], [6,6,6]], 
 
\t  [new Date("2016/7/3"), [1,3,6], [5,5,5]] 
 
\t ], 
 
\t { 
 
     labels: [ "Date", "SD" , "Scatter"], 
 
     showRangeSelector: true, 
 
     customBars: true, 
 
     drawPoints: true, 
 
      
 
\t \t \t series: { 
 
\t \t \t \t "SD" : { 
 
\t \t \t \t \t 
 
\t \t \t \t }, 
 
\t \t \t \t "Scatter" : { 
 
\t \t \t \t \t strokeWidth: 1 
 
\t \t \t \t } 
 
\t \t \t }, 
 
\t \t \t includeZero: true 
 
\t \t \t 
 
\t \t } 
 
\t);
<link href="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.0.0/dygraph.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.0.0/dygraph.js"></script> 
 
<div id="container" style="width:1000px; height:600px;"></div>

+1

'customBars'(즉, 데이터 형식)는 시리즈별로 설정할 수 없다는 것이 맞습니다. 해결 방법이 최선의 방법입니다. https://github.com/danvk/dygraphs/issues/319 – danvk

+0

을 참조하십시오. 많이 soooooo 고마워요! : D – Justine

+0

@Justine을 환영합니다. 정답을 올바른 것으로 생각한다면, 정당한 것으로 간주하고 올바른 것으로 표시 하시겠습니까? 감사! –

관련 문제