我可以改变Y轴标签显示，因为我放大/出一个有向图表？
我可以改变Y轴标签显示，因为我放大/出一个有向图表？
提问于 2014-07-24 04:06:32
我创建了一个动态图表来显示被标记的鱼的运动，在x轴上绘制时间图，在y轴上显示距离。河流中有十几个或更多的探测点，每个地点大约。距离它的邻居30-100公里。每个检测点都有四个或更多的检测器，标记为“D1”、“D2”、.‘'Dx’。最初的图表包含跨越近600公里的y轴上的标签.在这个决议中，我只想看到检测站点的主要标签，例如'Lock 1‘、Lock 2、'Lock 6’等。当我钻研到一个给定的站点时，我想要看到该站点的单个探测器的次要标签('D1‘、'D2’等等)。
我在动态图中使用一个滴答函数将我的y轴标签映射到相应的河流位置。我希望只有当我放大到一个站点时，次要标签才会出现在轴上，这样，只有该站点自己的主标签以及该站点的次要标签才会出现。
我可以使用回调函数返回当前的y分辨率吗？我是否需要并能在两个源列表之间切换，取决于y-分辨率？
回答 1
Stack Overflow用户
发布于 2014-08-05 22:57:47
解决方案是将一个滴答生成器/修饰符函数包含在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。
在本例中，我使用或修改了一组映射的滴答标记，但这种动态方法可以用于在每次绘制图形时根据内容生成一组新的滴答。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24924938
复制相关文章
相似问题
腾讯云开发者
