javascript - Dygraph 多个绘图 - 打开和关闭它们

Question

我正在考虑实现一个基于 dygraph 的 HTML5 应用程序，该应用程序显示多个绘图，如下应用程序: http://www.triplespark.net/elec/pdev/cpld/ise-pfsim/ise-screen-sim-result.png

我想知道对带有 dygraph 的多重情节有一定经验的人对其实现的看法。如上面的链接所示，图应该一个放在另一个的顶部，图应该是可移动的(通过复选框)并且只能水平调整大小(放大和缩小)。

我基本上可以看到两种方式:

1) 按照建议 here绘制一个大图，如下所示:

http://dygraphs.com/tests/color-visibility.html

2)在不同的 div 中绘制多个绘图(我最喜欢的选项)并保持它们同步，如下所示:

http://dygraphs.com/tests/synchronize.html

请注意:

1) 我不想在添加或删除一个图时重新绘制所有图。

2) 绘图可以有很多点(>1M 点)

我的第二个问题是关于情节的类型。我想知道是否有人可以看到如何给我关于 data_bus[0:7] 的“可折叠”图的实现的提示

任何建议都会很棒。我知道这个问题是通用的，我计划用最后一个示例来扩展这个问题，该示例将展示这个问题的解决方案。

问候法布里齐奥

Answer 1

这就是我所做的。不是最优雅的，但应该可以完成工作。

‹script›
data= [
      [new Date('2014/09/26 05:33 UTC'),1, 5],
      [new Date('2014/09/26 05:34 UTC'),2, 6],
      [new Date('2014/09/26 05:35 UTC'),3, 7],
      [new Date('2014/09/26 05:36 UTC'),4, 8]];
function plot(){
  var x=[0,0];
  if(document.opt.normal.checked==true)
  {
    x[0]=1;
  }
  if(document.opt.mean.checked==true)
  {
    x[1]=1;
  }
  var temp=[];
  for(var i=0;i‹data.length;i++)
  {
     temp.push([data[i][0]]);
     if(x[0]==1) temp[i].push(data[i][1]);
     if(x[1]==1) temp[i].push(data[i][1]);
  }
  g= new Dygraph(document.getElementById('chartarea'),temp);
}

‹/script›
‹body onload="plot();"›
    ‹div id="chartarea"›‹/div›
    ‹form name="opt" action="#"x›
        ‹input type="checkbox" name="normal" onclick="plot();" checked/›‹span›y1‹/span›
        ‹br›‹input type="checkbox" name="mean" onclick="plot();"/›‹span›y2‹/span›
‹/body›

编辑:刚刚发现:dygraph setVisibility 方法可用于避免为每个切换重新创建 dygraph。