Question

由于使用Dygraph你无法将rangeSelector与animatedZoom（Making rangeSelector and animateZoom both active at the same time in Dygraph）组合在一起，我试图通过同步2个图表来创建一个变通方法：一个大的主图表和一个较小的图表显示相同的数据作为'rangeselector'图表。

我想要达到的目的是：

当您在上方图表中选择一个区域时，此图表会缩放到该区域 region和lower（rangeselector）图表显示一个矩形突出显示总时间序列的哪一部分在鞋帮中可见图表。
当您在下方（范围选择器）图表中选择一个区域时，此区域会突出显示，上方图表会缩放到该区域（较低的图表仍然显示全时系列，仅突出显示上图中可见的时间段。）。

尽管我已经掌握了非常基本的javascript技巧，但是当你在下面的图表（rangeSelector）中选择一个句点时，上面的图表会缩放到那个时期。没关系。

当您选择上方图表时，它会在下方图表中突出显示该时间段。但它不会缩放到该区域。它应该同时执行这两项操作：突出显示下方图表中的期间缩放到上方图表中的期间。

我该怎么做？

到目前为止，这是我的代码：

<html>
<head>
    <script type="text/javascript" src="dygraph-combined.js"></script>
</head>
<body>
    <div id="graphdiv1" style="width:100%; height:90%;"></div>
    <div id="graphdiv2" style="width:100%; height:10%;"></div>

    <script type="text/javascript">
        var blockRedraw = false;

        //main chart
        g = new Dygraph(
            document.getElementById("graphdiv1"),
            "temperatures.csv", // path to CSV file
            {
                drawCallback: function(me, initial) {
                    var xrange = g.xAxisRange();
                    rangeleft = xrange[0];
                    rangeright = xrange[1];
                    if (blockRedraw || initial) return;
                    blockRedraw = true;
                    var xrange = me.xAxisRange();
                    var yrange = me.yAxisRange();
                    blockRedraw = false;
                    g2.updateOptions( {
                        underlayCallback: function(canvas, area, g) {
                            canvas.fillStyle = "rgba(255, 255, 102, 1.0)";
                            function highlight_period(x_start, x_end) {
                                var canvas_left_x = g.toDomXCoord(x_start);
                                var canvas_right_x = g.toDomXCoord(x_end);
                                var canvas_width = canvas_right_x - canvas_left_x;
                                canvas.fillRect(canvas_left_x, area.y, canvas_width, area.h);
                            }
                            highlight_period(rangeleft,rangeright);
                        }
                    } );
                }
            } );

        //small range selector chart
        g2 = new Dygraph(
            document.getElementById("graphdiv2"),
            "temperatures.csv", // path to CSV file
            {
                valueRange:[0, 100],
                //reset Y-axis range to default (prevent vertical zooming)
                zoomCallback: function() {
                                g2.updateOptions({valueRange:[0, 100]});
                } ,
                drawCallback: function(me, initial) {
                    if (blockRedraw || initial) return;
                    blockRedraw = true;
                    var range2 = me.xAxisRange();
                    var yrange2 = me.yAxisRange();
                    g.updateOptions( { dateWindow: range2 } );
                    blockRedraw = false;
                } ,
            }
      );  

</script>
</body>
</html>

Dygraphs解决方法将rangeSelector与animatedZoom组合在一起

0 个答案: