2017-06-02 71 views
0

我使用禁用的範圍內選擇小圖: showInRangeSelector: false, ,但我發現警告標誌是這樣的:enter image description here 我似乎無法找到哪裏是錯誤。DYGRAPHS:顯示警告時,禁止小圖的範圍內選擇

更新,代碼:

<html> 
<head> 
<link href="http://dygraphs.com/2.0.0/dygraph.css" rel="stylesheet"/> 
<script src="http://dygraphs.com/2.0.0/dygraph.js"></script> 
<div id="hello" class="chart"></div> 
</head> 
<body> 
<script type = "text/javascript"> 

var hello = [ 
      [new Date("2016-03-06"),[10,20,30],[11,11,11]], 
      [new Date("2016-03-07"),[10,20,30],[15,15,15]], 
      [new Date("2016-03-08"),[10,20,30],[32,32,32]], 
      [new Date("2016-03-09"),[10,20,30],[18,18,18]], 
      [new Date("2016-03-10"),[10,20,30],[26,26,26]], 
      [new Date("2016-03-11"),[10,20,30],[31,31,31]], 
      [new Date("2016-03-12"),[10,20,30],[9,9,9]], 
     ], 

a = new Dygraph(
    document.getElementById("hello"),hello, 
    { 
     labels: [ "Date", "Mean" , "Scatter"], 
     customBars: true, 
     showRangeSelector: true, 
     showInRangeSelector : false, 
     interactionModel: Dygraph.defaultInteractionModel, 
     series: { 
      "Mean" : { 
       drawPoints: false, 
       color: "#585858", 
      }, 
      "Scatter" : { 
       drawPoints: true, 
       pointSize: 3, 
       strokeWidth: 0, 
      } 
     },  
    } 
); 
</script> 

謝謝:)

我必須添加額外的措辭,因爲該職位主要是代碼,我不能將它張貼:P

+0

你能發佈你的代碼能夠幫助你嗎? –

+0

@LucidioVacas新增:)我做了一個jfiddle,但你不能看到警告標誌:P – Justine

回答

1

這是我在想的解決方法。告訴我它是否對你有用。

這個想法是你可以爲範圍選擇器創建另一個系列。

這個系列的數據並不重要,因爲它不會顯示。但這取決於你想要看到範圍選擇器的方式。如果你想看到範圍選擇器中的典型行,你可以使用這個第一個解決方案。

https://jsfiddle.net/b8sz6m36/4/

var hello = [ 
     [new Date("2016-03-06"),[10,20,30],[11,11,11],[1,1,1]], 
     [new Date("2016-03-07"),[10,20,30],[15,15,15],[1,1,1]], 
     [new Date("2016-03-08"),[10,20,30],[32,32,32],[1,1,1]], 
     [new Date("2016-03-09"),[10,20,30],[18,18,18],[1,1,1]], 
     [new Date("2016-03-10"),[10,20,30],[26,26,26],[1,1,1]], 
     [new Date("2016-03-11"),[10,20,30],[31,31,31],[1,1,1]], 
     [new Date("2016-03-12"),[10,20,30],[9,9,9],[1,1,1]], 
    ], 

a = new Dygraph(
document.getElementById("hello"),hello, 
{ 
    labels: [ "Date", "Mean" , "Scatter", "RangeSelector"], 
    customBars: true, 
    showRangeSelector: true, 
    interactionModel: Dygraph.defaultInteractionModel, 
    series: { 
     "Mean" : { 
      drawPoints: false, 
      color: "#585858", 
        showInRangeSelector : false, 
     }, 
     "Scatter" : { 
      drawPoints: true, 
      pointSize: 3, 
      strokeWidth: 0, 
        showInRangeSelector : false, 
     }, 
     "RangeSelector" : { 
      showInRangeSelector : true, 
     } 
    },  
    } 
); 

如果不要緊,你有範圍的選擇完全是空的,你可以使用第二個解決方案,其中在意甲的rangeselector的數據是簡單

https://jsfiddle.net/b8sz6m36/5/

var hello = [ 
     [new Date("2016-03-06"),[10,20,30],[11,11,11],0], 
     [new Date("2016-03-07"),[10,20,30],[15,15,15],0], 
     [new Date("2016-03-08"),[10,20,30],[32,32,32],0], 
     [new Date("2016-03-09"),[10,20,30],[18,18,18],0], 
     [new Date("2016-03-10"),[10,20,30],[26,26,26],0], 
     [new Date("2016-03-11"),[10,20,30],[31,31,31],0], 
     [new Date("2016-03-12"),[10,20,30],[9,9,9],0], 
    ], 

a = new Dygraph(
document.getElementById("hello"),hello, 
{ 
    labels: [ "Date", "Mean" , "Scatter", "RangeSelector"], 
    customBars: true, 
    showRangeSelector: true, 
    interactionModel: Dygraph.defaultInteractionModel, 
    series: { 
     "Mean" : { 
      drawPoints: false, 
      color: "#585858", 
        showInRangeSelector : false, 
     }, 
     "Scatter" : { 
      drawPoints: true, 
      pointSize: 3, 
      strokeWidth: 0, 
        showInRangeSelector : false, 
     }, 
     "RangeSelector" : { 
      showInRangeSelector : true, 
     } 
    },  
    } 
); 
+0

很好的解決方案!但是沒有辦法將它禁用?因爲大量數據直接從數據庫中生成,添加另一個空數據列似乎是多餘的 – Justine

+0

有一種更有效的解決方案可以按照你說的方式工作。你應該在沒有rangeselector的情況下創建你的數據dygraph,並創建一個沒有數據但帶有範圍選擇器的新空數據庫,並使用dygraph的synchronize.js同步它們 –

0

showInRangeSelector選項必須針對圖的每個系列進行特定設置,而不是在常規選項中。 嘗試設置一系列選項裏面那個選項取決於如果你想要特定系列出現在rangeselector

a = new Dygraph(
    document.getElementById("hello"),hello, 
    { 
     labels: [ "Date", "Mean" , "Scatter"], 
     customBars: true, 
     showRangeSelector: true, 
     interactionModel: Dygraph.defaultInteractionModel, 
     series: { 
      "Mean" : { 
       drawPoints: false, 
       color: "#585858", 
       showInRangeSelector : false 
      }, 
      "Scatter" : { 
       drawPoints: true, 
       pointSize: 3, 
       strokeWidth: 0, 
       showInRangeSelector : true 
      } 
     },  
    } 
); 
+0

是啊我注意到..但是如果我將兩個都設爲false,它仍然會彈出一個警告標誌。是否有可能在範圍選擇器中不顯示任何內容? @Lucidio Vacas – Justine

0

我不清楚地瞭解你爲什麼要做到這一點,但也許這是假性還是真性一個辦法。您必須在創建dygraph之前預先處理信息。這樣,只有在任何一個系列將要顯示時,才能顯示範圍選擇器。

var showMeanInRangeSelector = false; // or true 
var showScatterInRangeSelector = false; // or true 
var rangeSelectorVisible = showMeanInRangeSelector || showScatterInRangeSelector; 

a = new Dygraph(document.getElementById("hello"),hello, 
    { 
    labels: [ "Date", "Mean" , "Scatter"], 
    customBars: true, 
    showRangeSelector: rangeSelectorVisible, 
    interactionModel: Dygraph.defaultInteractionModel, 
    series: { 
     "Mean" : { 
      drawPoints: false, 
      color: "#585858", 
      showInRangeSelector : showMeanInRangeSelector 
     }, 
     "Scatter" : { 
      drawPoints: true, 
      pointSize: 3, 
      strokeWidth: 0, 
      showInRangeSelector : showScatterInRangeSelector 
     } 
    },  
    } 
); 
+0

我的實際數據實際上是散點圖,但範圍選擇器中的小圖只顯示陰影線圖,作爲我的數據的彙總不會有意義。所以我想清空範圍選擇器,但看起來不可能。謝謝! – Justine

+0

如果你想上傳一個jsfiddle並解釋一點,我們可以嘗試幫助你。問候 –

+0

這是jfid:https://jsfiddle.net/b8sz6m36/3/謝謝! 陰影區域是標準差,點是數據組的平均值。在jfid中,我啓用了範圍選擇器中的小圖。它不代表數據,但我仍然希望範圍選擇器功能在圖形周圍平移。 – Justine