同步Dygraphs，其中一些有双y轴

Synchronize Dygraphs where some have a double y-axis?

本文关键字：Dygraphs 同步更新时间：2023-09-26

我在:https://groups.google.com/forum/#!主题/dygraphs-users/9 rl8-4-e35y同步4个dygraph。有些图表会有多个时间序列。然而，我希望有可能在一些图形中使用两个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');                 
      }
      }

这里有一个示例jsfiddle

你必须创建两个选项对象

opt1 =具有特定选项的对象
opt2 = object with common options

则，在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)
        )
    );
}