Javascript 同步某些具有双y轴的动态图？

我在以下方面仿效了这个例子： 同步4个动态图。其中一些图表将具有多个时间序列。然而，我想对一些图使用两个y轴来解释并非所有数据都在相同的（y）刻度上的事实，我不想要太多不必要的图。这可能吗

我正在使用的代码：

<script type="text/javascript">
files = [ "DataFiles/NRTData.csv", "DataFiles/data1.csv", "DataFiles/data1.csv",           "DataFiles/data1.csv" ];
  gs = [];
  var blockRedraw = false;
  for (var i = 1; i <= 4; i++) {
    gs.push(
      new Dygraph(
        document.getElementById("div" + i),
        files[i - 1], {
          rollPeriod: 7,
          //errorBars: true,
      errorBars: false,
          drawCallback: function(me, initial) {
            if (blockRedraw || initial) return;
            blockRedraw = true;
            var range = me.xAxisRange();
            for (var j = 0; j < 4; j++) {
              if (gs[j] == me) continue;
              gs[j].updateOptions( { dateWindow: range } );
            }
            blockRedraw = false;
          }
    }
      )
    );
  }
</script>

这里有一个例子

您必须创建两个对象选项

opt1=具有特定选项的对象

opt2=具有公共选项的对象

然后，在

drawCallBack

var redraw = function(me, initial) {
    if (blockRedraw || initial) return;
    blockRedraw = true;
    var range = me.xAxisRange();
    for (var j = 0; j < 4; j++) {
        if (gs[j] == me) continue;
        gs[j].updateOptions( { dateWindow: range } );
    }
    blockRedraw = false;
};

var opt1 = {
    // add function to this object too.
    drawCallback: redraw, 
    labels: ['DateTime', 'a', 'b'],
    ylabel: 'a',
    y2label: 'b',
    series : {
        'a': {
            axis: 'y1',
            errorBars: false,
        },
        'b': {
            axis: 'y2'
        }
    },
    axes: {
        y: {
            // set axis-related properties here
            drawGrid: true,
            independentTicks: true,
            axisLabelColor: 'green'
        },
        y2: {
            // set axis-related properties here
            labelsKMB: true,
            drawGrid: true,
            independentTicks: true,
            axisLabelColor: 'blue'
        },
        x: {
            axisLabelFormatter: function(d) {
                return d.strftime('%Y %m-%d %H');                 
            }
        };
};

var opt2 = {
    rollPeriod: 7,
    //errorBars: true,
    errorBars: false,
    drawCallback: redraw
};

for (var i = 1; i <= 4; i++) {
    gs.push(
        new Dygraph(
            document.getElementById("div" + i),
            files[i - 1], 
            // use opt1 in i=1
            (i === 1) ? opt1 : opt2)
        )
    );
}

var redraw=函数（me，初始值）{
if（blockRedraw | | initial）返回；
blockRedraw=true；
var range=me.xAxisRange（）；
对于（var j=0；j<4；j++）{
如果（gs[j]==me）继续；
gs[j].updateOptions（{dateWindow:range}）；
}
blockRedraw=false；
};
变量opt1={
//将函数也添加到此对象。
drawCallback：重新绘制，
标签：['DateTime'，'a'，'b']，
伊拉贝尔：“a”，
y2label:'b'，
系列：{
“a”：{
轴：“y1”，
错误条：错误，
},
“b”：{
轴：“y2”
}
},
轴线：{
y:{
//在此处设置与轴相关的属性
是的，
独立滴答声：没错，
axisLabelColor:“绿色”
},
y2：{
//在此处设置与轴相关的属性
labelsKMB：没错，
是的，
独立滴答声：没错，
axisLabelColor:“蓝色”
},
x:{
axisLabelFormatter:函数（d）{
返回d.strftime（“%Y%m-%d%H”）；
}
};
};
var opt2={
滚动周期：7，
//没错，
错误条：错误，
drawCallback:重画
};
对于（var i=1；i
var redraw = function(me, initial) {
    if (blockRedraw || initial) return;
    blockRedraw = true;
    var range = me.xAxisRange();
    for (var j = 0; j < 4; j++) {
        if (gs[j] == me) continue;
        gs[j].updateOptions( { dateWindow: range } );
    }
    blockRedraw = false;
};

var opt1 = {
    // add function to this object too.
    drawCallback: redraw, 
    labels: ['DateTime', 'a', 'b'],
    ylabel: 'a',
    y2label: 'b',
    series : {
        'a': {
            axis: 'y1',
            errorBars: false,
        },
        'b': {
            axis: 'y2'
        }
    },
    axes: {
        y: {
            // set axis-related properties here
            drawGrid: true,
            independentTicks: true,
            axisLabelColor: 'green'
        },
        y2: {
            // set axis-related properties here
            labelsKMB: true,
            drawGrid: true,
            independentTicks: true,
            axisLabelColor: 'blue'
        },
        x: {
            axisLabelFormatter: function(d) {
                return d.strftime('%Y %m-%d %H');                 
            }
        };
};

var opt2 = {
    rollPeriod: 7,
    //errorBars: true,
    errorBars: false,
    drawCallback: redraw
};

for (var i = 1; i <= 4; i++) {
    gs.push(
        new Dygraph(
            document.getElementById("div" + i),
            files[i - 1], 
            // use opt1 in i=1
            (i === 1) ? opt1 : opt2)
        )
    );
}