2017-04-18 27 views
1

我試圖建立一個dygraphs 2系列的一種類型:分散另一種類型:errorBars但看起來它只能顯示任意一個:結合散射和customBars在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,我不能運行的jsfiddle爲引用庫未設置dygraphs。你正在使用哪個版本?您能否修復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。如果你認爲答案是正確的,你會如此投票並將其標記爲正確的?謝謝! –