Question

我创建了一个dygraphs图表，显示标记鱼的移动，时间绘制在x轴上，移动的距离显示在y轴上。河里有十几个或更多的探测点，每个站点都在附近。距离邻居30-100公里。每个检测位点具有四个或更多个检测器，标记为“D1”，“D2”，......“Dx”。初始图表包含横跨近600公里的y轴标签。在那个分辨率下，我只想看到检测站点的主要标签，例如“锁定1”，“锁定2”，“锁定6”等。当我向下钻取到给定的站点时，然后才会我是否希望在该站点看到各个探测器的次要标签（'D1'，'D2'等）

我在dygraphs中使用自动收报机功能将我的y轴标签映射到相应的河流位置。我希望只有当我放大网站时，次要标签才会显示在轴上，这样只显示该网站自己的主要标签，以及该网站的次要标签。

Portion of an JS associative array used to map labels to the y-axis.

我可以使用回调函数返回当前的y分辨率吗？我是否需要，并且可以在两个源列表之间切换，具体取决于y分辨率吗？

Initial view of the chart, with a y-axis range of ~600 km.

Intermediate zoom, displaying three four on the y-axis.

Zoomed in on Lock 9. Here, and only at this scale, I want to display the indivdual detectors ('D1', 'D2', etc.

Answer 1

解决方案是在Dygraphs自动收报机选项中加入自动收录器生成器/修改器功能，并在每次重绘图形时将该函数传递给我想要测试的参数。在我的应用程序中，我通过并在 yAxisRange（）中测试适当的小间隔，但在下面的简单示例中，我仅测试y的 isZoomed 状态。轴。

<!DOCTYPE html>
<html>
<head>
   <script type="text/javascript" src="http://dygraphs.com/dygraph-combined.js"></script>
</head>
<body>
   <div id="dgraphChartContainer" style="width:800px; height:600px;border:2px solid;border-radius:5px;"></div>
   <script type="text/javascript">
      //Define global variables
      var myLocationTable =
         [
                ["            D1",1001],
                ["            D2",1002],
                ["Station #1 ---",1002.5],
                ["            D3",1003],
                ["            D4",1004],

                ["            D1",2001],
                ["            D2",2002],
                ["Station #2 ---",2002.5],
                ["            D3",2003],
                ["            D4",2004],

                ["            D1",3001],
                ["            D2",3002],
                ["Station #3 ---",3002.5],
                ["            D3",3003],
                ["            D4",3004]
         ];

        function makeTickerList(isZoomed) {
         var myTempArray = [];
         var myTempObject = {};
         for (var i=0; i < myLocationTable.length; i++) {
                if (isZoomed) {
                    myTempObject = {
                        v: myLocationTable[i][1],
                        label: myLocationTable[i][0]
                    }
                } else {
                    myTempObject = {
                        v: myLocationTable[i][1],
                        label: (myLocationTable[i][0]).slice(0,-2)
                    }
                }
            myTempArray.push(myTempObject);
         }
         return myTempArray;
      }

        var vGraph = new Dygraph(document.getElementById("dgraphChartContainer"),
        [
            [ new Date("2010/09/30 21:00:00"),null,null,null ],
            [ new Date("2010/10/01 03:00:00"),1001,2003,3004 ],
            [ new Date("2010/10/01 09:00:00"),1002,2001,3003 ],
            [ new Date("2010/10/01 15:00:00"),1003,2002,3002 ],
            [ new Date("2010/10/01 21:00:00"),1004,2004,3001 ],
            [ new Date("2010/10/02 03:00:00"),2001,3001,2004 ],
            [ new Date("2010/10/02 09:00:00"),2002,3002,2003 ],
            [ new Date("2010/10/02 15:00:00"),2003,3003,2002 ],
            [ new Date("2010/10/02 21:00:00"),2004,3004,2001 ],
            [ new Date("2010/10/03 03:00:00"),3001,1004,1004 ],
            [ new Date("2010/10/03 09:00:00"),3002,1002,1003 ],
            [ new Date("2010/10/03 15:00:00"),3003,1003,1002 ],
            [ new Date("2010/10/03 21:00:00"),3004,1004,1001 ],
            [ new Date("2010/10/04 03:00:00"),null,null,null ]
        ],
            { //options
                labels: ["Event Date","Me","Myself","Irene"],
                axes: {
                         y: {
                         ticker: function(min, max, pixels, opts, dygraph, vals) {
                             return makeTickerList(dygraph.isZoomed("y"));
                         } //ticker closure
                        } //y-axis closure
                },  //end of axes declarations
                title: "Dynamic Y-Axis Ticker Test",
            strokeWidth: 2,
                yAxisLabelWidth: 110
            }  //options closure
        );  // end of dygraph declaration
   </script>
</body>
</html>

当完整绘制图形时，仅显示“Station＃x - ”刻度标签，但当用户放大y轴时，显示每个工作站的所有五个刻度的完整标签。这是JSFiddle。

在这个例子中，我使用或修改了一组映射的刻度线，但是每次绘制图形时，这种动态方法都可以用来根据内容生成一组新的刻度。

当我放大/缩小dygraphs图表时，我可以更改Y轴标签显示吗？

1 个答案: