javascript - 更改多个 dygraph 图表的系列可见性

Question

2015 年 7 月 10 日更新

我正在尝试使用一组复选框来控制多个图中数据系列的可见性。我已经使用 dygraphs 网站上的可见性选项和其他问题查看了几个示例，但到目前为止我发现的要么集中在单个图表上，要么仅限于我需要的细节。

我的第一个想法是让复选框更改可见性值，然后重新绘制图表，但是我很快意识到可见性只是恢复到我在创建图表时设置的初始条件。

现在我想知道是否可以在自己的循环中使用“setVisibility”创建一个函数来根据需要更改每个图表的可见性。以下是我最近尝试过的方法，但它不起作用。我不确定这是否是实现这一目标的正确方法。

 function change(el) {
   for (i=0; i<23; i++) {
     chart[i].setVisibility(el.id, el.checked);
   }
 }

我的复选框 HTML 代码:

<input type=checkbox id="0" checked onClick="change(this)"> <label for="0"> data1</label>
<input type=checkbox id="1" checked onClick="change(this)"> <label for="1"> data2</label>
<input type=checkbox id="2" checked onClick="change(this)"> <label for="2"> data3</label>

创建绘图的 JS 代码:

var chart = [];
for (i=0; i<23; i++){
    chart.push( 
      new Dygraph(
        document.getElementById("div"+i), 
        csv[i],{
          rollPeriod: 1, errorBars: true,
          colors: ['#006600', '#993300', '#003399'],
          title: name, connectSeparatedPoints: true,
          drawPoints: true, sigFigs: 4, legend: 'always',
          labelsSeparateLines: true, labelsDivWidth: 250,
          visibility: [true, true, true]
        }
      )
   );
}

我没有太多的 JavaScript 经验，所以如果这是一个简单的问题，我深表歉意，但它一直让我感到不舒服。

Answer 1

我找到了问题的解决方案。这个问题主要根源于我的“图表”变量的范围，因为它需要是一个全局变量，这在我原来的帖子中并不明显。通过将其移至包含函数之外，解决了该问题。

<input type=checkbox id="acheck" index=0 checked onClick="change('acheck',0)"> <label for="0"> data1</label>
<input type=checkbox id="bcheck" index=1 checked onClick="change('bcheck',1)"> <label for="1"> data2</label>
<input type=checkbox id="ccheck" index=2 checked onClick="change('ccheck',2)"> <label for="2"> data3</label>

以及我使用的Javascript代码:

for (i=0; i<23; i++) {
  chart[i] = new Dygraph(
    document.getElementById("div"+i), csv[i], {
      rollPeriod: 1,
      errorBars: true,
      colors: ['#006600', '#993300', '#003399'],
      connectSeparatedPoints: true,
      drawPoints: true,
      sigFigs: 4,
      legend: 'always',
      labelsSeparateLines: true,
      labelsDivWidth: 250,
      animatedZooms: false,
      visibility: [vis2[0], vis2[1], vis2[2]],
    }
  );
}

function change(element,ind) {
  var x=document.getElementById(element);
  for (i=0; i<=22; i++) {
    chart[i].setVisibility(ind, x.checked);
  }
}