2014-02-27 4 views
1

데이터 소스에 파일 URL을 제공 할 때 완벽하게 작동하는 Dygraphs 차트가 있습니다. 그러나 데이터를 HTML 래퍼에 직접 포함하면 drawCallback의 함수가 실행되지 않습니다. Firebug를 사용하여 추적하면 URL 참조가있는 페이지를로드 할 때 is_initialTrue이지만 <body> 태그 내에 onLoad="drawCallback(vGraph,True);"을 배치하더라도 데이터 (및 라벨)를 기본 형식으로 포함하면 False이됩니다. 나는 처음 실행을 테스트하기 위해 자체 변수를 설정함으로써이를 "해결"했습니다.Dygraph의 drawCallback에서 "is_initial"은 언제 true입니까?

var vGraph = new Dygraph(document.getElementById("dgraphChartContainer"), 
ExternalDataSource.csv, 
{ //options 
    connectSeparatedPoints: true, 
    labelsDiv: "dygraphLabelsContainer", 
    ... 
    } 
); 

vGraph.updateOptions({ 
    highlightCallback: function(event, xdate, points_array, rowNumber, seriesName) { 
    ... 
    }, 
    unhighlightCallback: function(event) { 
    ... 
    }, 
    drawCallback: function(g, is_initial) { 
     if (!is_initial) return; 
     buildTagList(vGraph.getLabels()); 
     mySeriesColors = vGraph.getColors(); 
     buildStyleDefinitions(); 
    } 
}); 

내가 말했듯이, 이것은 심지어 drawCallback에서 맹인 g 매개 변수를 사용하여, 잘 작동 :

여기에 외부 데이터 소스에 대한 원래의 기능, 코드입니다.

데이터 소스를 퍼가기 위해 내가 개발 한 시나리오입니다.

var vFirstTime = true; 
var vGraph = new Dygraph(document.getElementById("dgraphChartContainer"), 
[ 
[ new Date("2011/10/15 00:04:55"),null,null,-9.2,null,null,null,null,null,null], 
[ new Date("2011/10/24 10:39:32"),null,null,null,null,null,-9.2,null,null,null], 
... 
[ new Date("2011/10/25 21:02:30"),null,null,null,null,null,null,null,20.3,null], 
[ new Date("2013/10/28 08:49:52"),null,null,-17.9,null,null,null,null,null,null] 
], 
{ //options 
    labels: ["Event_Date","code-32565","code-32566","code-32568","code-32569","code-32573","code-32574","code-32575","code-32577","code-32578"], 
    connectSeparatedPoints: true, 
    labelsDiv: "dygraphLabelsContainer", 
    ... 
    } 
); 

vGraph.updateOptions({ 
    highlightCallback: function(event, xdate, points_array, rowNumber, seriesName) { 
    ... 
    }, 
    unhighlightCallback: function(event) { 
    ... 
    }, 
    // drawCallback: function(g, is_initial) { 
    // if (!is_initial) return; 
    drawCallback: function() { 
     if (!vFirstTime) return; 
     buildTagList(vGraph.getLabels()); 
     mySeriesColors = vGraph.getColors(); 
     buildStyleDefinitions(); 
     vFirstTime=false; 
    } 
}); 

I에 관계없이 데이터 소스의 내 drawCallback 호출 is_initial을 사용 할 수있는 뭔가가 있나요?

답변

1

생성자로 콜백을 이동하는 경우 귀하의 첫 번째 예제는 작동합니다 : 그래서

var vGraph = new Dygraph(document.getElementById("dgraphChartContainer"), 
ExternalDataSource.csv, 
{ //options 
    connectSeparatedPoints: true, 
    labelsDiv: "dygraphLabelsContainer", 
    highlightCallback: function(event, xdate, points_array, rowNumber, seriesName) { 
    ... 
    }, 
    unhighlightCallback: function(event) { 
    ... 
    }, 
    drawCallback: function(g, is_initial) { 
     if (!is_initial) return; 
     buildTagList(vGraph.getLabels()); 
     mySeriesColors = vGraph.getColors(); 
     buildStyleDefinitions(); 
    }, 
    ... 
}); 

, 여기 무슨 일이야?

차트가 처음으로 그려지면 drawCallback은 is_initial = true으로 시작됩니다. 원래 코드에서 데이터에 대한 XMLHttpRequest가 다시 발생한 후에 발생합니다.

작업의 순서는 다음과 같습니다 당신이 당신의 데이터를 인라인 할 때

것은 dygraphs은 기다릴 필요가 없습니다

  1. 생성자
  2. updateOptions
  3. drawCallback (참 = is_initial) 돌아올 XHR. 이제, 작업의 순서는 다음과 같습니다

    1. 생성자
    2. drawCallback
    3. updateOptions (= is_initial 사실)

    두 번째 drawCallback이 발생 (= is_initial false)를

  4. drawCallback 당신이 전화 때문에 updateOptions(). 그러므로 drawCallback is_initial = true으로 해고되는입니다. 단지 일찍 청취하지 않는 것입니다.

    dygraphs는이 모든 복잡함을 피할 수있는 .ready() 방법을 제공합니다. 대신 사용하면 더 행복 할 수 있습니다.

    var vGraph = new Dygraph(...); 
    vGraph.ready(function() { 
        buildTagList(vGraph.getLabels()); 
        mySeriesColors = vGraph.getColors(); 
        buildStyleDefinitions(); 
    });