奇怪的动态轴行为

时间:2014-04-11 16:40:49

标签: javascript jquery dygraphs

我写了这个DyGraph代码,希望用户能够打开/关闭该系列。

当两个系列都打开时,一切正常。两个轴刻度都是对的, 系列值是正确的,标签是正确的。

但是,如果我关闭Temp并让UR开启:UR轴刻度改变而且 点和标签值来自Temp。 如果我打开Temp并让UR关闭:反向发生......

注意:UR为绿色 - 温度为蓝色

欢迎任何帮助!

以下是代码:

<html>

<head>
<script type="text/javascript" src="dygraph-combined.js"></script>
<style type="text/css">
#graphdiv2 { position: absolute; left: 10px; top: 60px; }
#graphdiv3 { position: absolute; left: 70px; top: 550px; }
</style>
</head>

<body>

<div id="graphdiv2" style="width:1024px; height:500px;"></div>

<script type="text/javascript">

g2 = new Dygraph(document.getElementById("graphdiv2"), "temp.log", {

labels: ['Date','UR (%)','Temp (&deg;C)'],
ylabel: 'UR (%)',
y2label: 'Temp (&deg;C)',

visibility: [true, true],

series : {
   'UR (%)': {
      axis: 'y',
   },

   'Temp (&deg;C)': {
      axis: 'y2',
   },
},

axes: {
   y: {
      drawGrid: false,
      independentTicks: false,
   },

   y2: {
      drawGrid: false,
      independentTicks: true,
   }
},

});

function change(el) {
   g2.setVisibility(el.id, el.checked);
}

</script>

<div id="graphdiv3">

<p><b>On/Off: </b>
<input type=checkbox id=1 onClick="change(this)" checked> UR</input>
<input type=checkbox id=0 onClick="change(this)" checked> Temp</input>
</p>

</div>

</body>
</html>

以下是数据样本:

Date,UR,T
2014/04/10 14:16:51,55.00,28.00
2014/04/10 14:16:56,55.00,28.00
2014/04/10 14:17:02,55.00,28.00
2014/04/10 14:17:08,55.00,28.00
2014/04/10 14:17:13,55.00,28.00
2014/04/10 14:17:19,55.00,28.00
2014/04/10 14:17:24,55.00,28.00
2014/04/10 14:17:30,55.00,28.00
2014/04/10 14:17:35,54.00,28.00
2014/04/10 14:17:41,54.00,28.00
2014/04/10 14:17:46,54.00,28.00
2014/04/10 14:17:52,54.00,27.00
2014/04/10 14:17:58,54.00,27.00
2014/04/10 14:18:03,54.00,27.00
2014/04/10 14:18:09,54.00,27.00
2014/04/10 14:18:14,54.00,27.00
2014/04/10 14:18:20,54.00,27.00
2014/04/10 14:18:25,54.00,27.00
2014/04/10 14:18:31,54.00,27.00
2014/04/10 14:18:37,53.00,27.00
2014/04/10 14:18:42,53.00,27.00
2014/04/10 14:18:48,53.00,27.00
2014/04/10 14:18:53,53.00,27.00
2014/04/10 14:18:59,53.00,27.00
2014/04/10 14:19:04,52.00,27.00
2014/04/10 14:19:10,52.00,27.00
2014/04/10 14:19:16,53.00,26.00
2014/04/10 14:19:21,53.00,26.00
2014/04/10 14:19:27,53.00,26.00
2014/04/10 14:19:32,52.00,26.00
2014/04/10 14:19:38,52.00,26.00
2014/04/10 14:19:43,52.00,26.00
2014/04/10 14:19:49,51.00,26.00
2014/04/10 14:19:55,51.00,26.00
2014/04/10 14:20:00,51.00,26.00
2014/04/10 14:20:06,51.00,26.00
2014/04/10 14:20:11,50.00,26.00
2014/04/10 14:20:17,50.00,26.00
2014/04/10 14:20:22,50.00,26.00
2014/04/10 14:20:28,50.00,26.00
2014/04/10 14:20:34,49.00,26.00
2014/04/10 14:20:39,49.00,26.00
2014/04/10 14:20:45,49.00,26.00
2014/04/10 14:20:50,49.00,26.00
2014/04/10 14:20:56,49.00,26.00
2014/04/10 14:21:01,49.00,26.00
2014/04/10 14:21:07,48.00,26.00
2014/04/10 14:21:13,48.00,26.00
2014/04/10 14:21:18,48.00,26.00
2014/04/10 14:21:24,48.00,26.00
2014/04/10 14:21:29,48.00,26.00
2014/04/10 14:21:35,48.00,26.00
2014/04/10 14:21:40,48.00,26.00
2014/04/10 14:21:46,48.00,26.00
2014/04/10 14:21:52,48.00,26.00
2014/04/10 14:21:57,47.00,26.00
2014/04/10 14:22:03,47.00,26.00
2014/04/10 14:22:08,47.00,26.00
2014/04/10 14:22:14,47.00,26.00
2014/04/10 14:22:19,47.00,26.00
2014/04/10 14:22:25,47.00,26.00
2014/04/10 14:22:31,47.00,26.00
2014/04/10 14:22:36,47.00,26.00
2014/04/10 14:22:42,47.00,26.00
2014/04/10 14:22:47,47.00,26.00
2014/04/10 14:22:53,47.00,26.00
2014/04/10 14:22:58,47.00,26.00
2014/04/10 14:23:04,47.00,26.00
2014/04/10 14:23:10,47.00,26.00
2014/04/10 14:23:15,47.00,26.00
2014/04/10 14:23:21,46.00,26.00
2014/04/10 14:23:26,46.00,26.00
2014/04/10 14:23:32,46.00,25.00
2014/04/10 14:23:37,46.00,25.00
2014/04/10 14:23:43,46.00,25.00
2014/04/10 14:23:49,46.00,25.00
2014/04/10 14:23:54,46.00,25.00

1 个答案:

答案 0 :(得分:0)

好的...

到此为止。只需更改此部分:

});

function change(el) {
   g2.setVisibility(el.id, el.checked);
}

});

setStatus();

function setStatus() {
document.getElementById("visibility").innerHTML = g2.visibility().toString();
}

function change(el) {
g2.setVisibility(pel.id, el.checked);

setStatus();
}

为自己干杯! 迪斯科鸭