Question

当我提供数据源的文件URL时，我有一个完美的Dygraphs图表。但是，当我将数据直接嵌入到HTML包装器中时，我的drawCallback中的函数不会触发。使用Firebug进行跟踪，当我使用网址引用加载页面时，我发现is_initial为True，而当我以原生格式嵌入数据（和标签）时，我发现False，即使我将onLoad="drawCallback(vGraph,True);"放在<body>标记内。通过设置我自己的变量来测试首次执行，我已经“解决了”这个问题。

以下是外部数据源的原始功能代码：

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;
   }
});

无论数据来源如何，我都可以在is_initial电话中使用drawCallback吗？

Answer 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返回后发生。

操作顺序为：

构造
updateOptions
drawCallback（is_initial =真）

当您内联数据时，dygraphs不需要等待XHR返回。现在，操作顺序是：

构造
drawCallback（is_initial =真）
updateOptions
drawCallback（is_initial =假）

第二次drawCallback发生是因为你调用了updateOptions()。所以drawCallback 被is_initial = true解雇了，只是你没有及早听到它。

dygraphs提供.ready()方法，让您避免所有这些复杂性。您可能会更乐意使用它：

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

什么时候Dygraph的drawCallback中的“is_initial”为真？

1 个答案: