Question

更新7-10-15

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

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

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

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

更改多个dygraphs图表的系列可见性

1 个答案: