javascript - DYGraphs:使用一个 RangeSelector 控制多个图形

Question

我在一个页面上有两个图表，我希望能够使用相同的 RangeSelector 控制其中的缩放和平移。换句话说，当我移动 RangeSelector 时，两个图应该同时使用react。

我的第一个图表中的值是 2 到 20 之间的小数字，而我的第二个图表中的数字具有大于 3000 的大值。这就是我不想将两条线放在同一个图表中的原因。两个图具有相同的日期时间

g1 = new Dygraph(document.getElementById("graph1"),
             // For possible data formats, see http://dygraphs.com/data.html
             // The x-values could also be dates, e.g. "2012/03/15"
             "X,Y\n" +
             "1,4\n" +
             "2,2\n" +
             "3,4\n" +
             "4,6\n" +
             "5,8\n" +
             "6,3\n" +
             "7,12\n" +
             "8,14\n",
             {
                 showRangeSelector: true
             });
g2 = new Dygraph(document.getElementById("graph2"),
             // For possible data formats, see http://dygraphs.com/data.html
             // The x-values could also be dates, e.g. "2012/03/15"
             "X,Y\n" +
             "1,4356\n" +
             "2,4789\n" +
             "3,4812\n" +
             "4,5012\n" +
             "5,4675\n" +
             "6,4357\n" +
             "7,4467\n" +
             "8,5134\n",
             {
                    // options
             });

这是我的 jsfiddle

编辑 1: 有一个解决方案可以同步缩放和平移 Multiple graphs in sync example , 但我仍然想知道这是否适用于范围选择器

Answer 1

我已经使用 Dygraph 几个月了，我也有同样的问题。答案是有可能。

一旦您同步了多个 dygraph 的缩放，范围选择器也会同步。我想做的是在没有范围选择器的情况下显示所有图表，并且在底部只有一个范围选择器来同时控制所有图表。我的解决方案是创建一个额外的空 dygraph 也与其余部分同步，并在此图中添加范围选择器。我的结果显示在附图中。