Question

我正在使用jQuery.flot在我的项目中创建自定义图表，但我需要反转Y轴的顺序。现在，在botton是最小值并且在最大值上，我需要在botton处具有最大值并且在顶部具有最小值。

这是我的例子：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>

<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>

非常感谢你的帮助

Answer 1

不幸的是，这在flot 0.6（当前版本）中并不受支持。

如果你愿意使用开发版本（http://code.google.com/p/flot/source/checkout），那就有希望了：

Issue #263具体是关于这一点，并在r303

中修复

您最好的选择就是查看最新资源并观察它是否正常工作！

使用jQuery.flot反转Y轴

1 个答案: