使用 jQuery.flot 反转 Y 轴
我正在使用 jQuery.flot 在我的项目中创建自定义图表，但我需要反转 Y 轴的顺序。现在，底部是最小值，顶部是最大值，我需要在底部有最大值，在顶部有最小值。
这是我的例子： http://pastehtml.com/view/1doilsa.html
但是 inverseTransform选项似乎不起作用。
<body>
script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"
script type="text/javascript" src="http://flot.googlecode.com/svn/trunk/jquery.flot.js"
<div class="plot-lines" style="width: 500px; height: 400px;"></div>
<script type="text/javascript">
$.plot($('.plot-lines'),
[{
data: [ [0, null], [1, 3], [2, 6], [3, 2], [4, null] ],
lines: {
show: true
},
points: {
show: true
}
}],
{
xaxis: {
ticks: [ [0, ''], [1, 'Race 1'], [2, 'Race 2'], [3, 'Race 3'], [4, ''] ]
},
yaxis: {
tickDecimals: 0,
inverseTransform: function (v) { return -v; }
}
}
);
</script>
</body>
非常感谢您的帮助
I'm using jQuery.flot to create custom charts in my project, but I need invert the order of Y axis. Now, at the botton is the min value and at top de max value, I need to have the max value at botton and the min value at top.
This is my example: http://pastehtml.com/view/1doilsa.html
But the inverseTransform option seems not to work.
<body>
script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"
script type="text/javascript" src="http://flot.googlecode.com/svn/trunk/jquery.flot.js"
<div class="plot-lines" style="width: 500px; height: 400px;"></div>
<script type="text/javascript">
$.plot($('.plot-lines'),
[{
data: [ [0, null], [1, 3], [2, 6], [3, 2], [4, null] ],
lines: {
show: true
},
points: {
show: true
}
}],
{
xaxis: {
ticks: [ [0, ''], [1, 'Race 1'], [2, 'Race 2'], [3, 'Race 3'], [4, ''] ]
},
yaxis: {
tickDecimals: 0,
inverseTransform: function (v) { return -v; }
}
}
);
</script>
</body>
Thanks a lot for your help
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
不幸的是，flot 0.6（当前版本）对此没有很好的支持。
不过，如果您愿意使用开发版本 (http://code.google.com/p/flot/source/checkout)，还是有希望的：
问题 #263 专门与此相关，已在 r303
您最好的选择就是查看最新的源代码并观察它的工作原理！
Unfortunately, this is not supported well in flot 0.6 (the current release).
There is hope though, if you are willing to use the development release (http://code.google.com/p/flot/source/checkout):
Issue #263 specifically was about that, and it is fixed in r303
Your best bet is just to check out the newest source and watch it work!