同步一些具有双 y 轴的 Dygraphs？

Question

我遵循了以下示例：https://groups.google.com/forum/#!topic/dygraphs-users/9RL8-4-e35Y 同步 4 个 dygraphs。其中一些图表将有多个时间序列。但是，我希望有可能对某些图形使用两个 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>

我假设我应该在上面代码的某处插入下面的代码（来自另一个 [工作] dygraph），但是在尝试了很多选项之后我无法让它工作..

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

Answer 1

这里有一个例子jsfiddle

你必须创建两个选项对象

1. opt1 = 具有特定选项的对象
2. 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)
        )
    );
}