【问题标题】:flot - legend entries and stacked bars have reverse orderflot - 图例条目和堆积条的顺序相反
【发布时间】:2012-09-28 13:24:47
【问题描述】:

我遇到了另一个小的堆叠条问题:填充绘图时,flot 自上而下添加图例条目并自下而上堆叠条。这样,图例的顺序与条形完全相反。

flot API 允许按照标签的添加顺序、字母顺序或提供自定义排序功能对标签进行排序。我尝试提供一个始终返回 -1 的排序函数,以便将原始排序反转,但由于某种原因,在使用堆叠条时似乎根本不会评估 sorted 选项。至少我在那里尝试过的任何东西(ascendingdescendingfalse,我自己的功能)对实际的传说没有任何影响。

我在http://jsfiddle.net/YvGZu/1/ 整理了一个测试用例来说明问题。

编辑:经过更多的测试......难道图例排序被一起破坏了吗?

【问题讨论】:

    标签: flot legend sorted stacked


    【解决方案1】:

    我巧合地在几天内遇到了与您相同的问题。经过一番折腾,我意识到处理图例排序的commit 是最近才出现的(2012 年 7 月),并且没有包含在我使用的 jquery.flot.js 版本中。

    通过检查 Fiddle 上的 flot 资源,您似乎也是如此。如果您将 flot js 文件更新为one that includes the sorting algorithm,您的问题可能会像我的一样得到解决。 (好吧,我手动打了补丁,因为我还有其他实验性更改。)

    我猜你接下来会遇到和我一样的障碍,即现有的排序代码仅按字母顺序排序,或者使用只能检查标签文本和颜色代码的比较器。这对我来说还不够好——我想分配一个任意的排序顺序服务器端。为了做到这一点,我在我的系列标签中添加了一个隐藏的排序顺序字符串:

    label: '<a class="hiddenOrder">2</a>foo'
    

    然后将 Flot 占位符中的那些 a 块设置为隐藏(编辑:还需要将样式应用于工具提示,它们包含在 Flot 占位符中)。

    #flotPlaceholder a.hiddenOrder, 
    #flotTooltip a.hiddenOrder
    {display:none;}
    

    forked your fiddle 并包含了我的排序技术,因此您可以尝试一下,但不幸的是,看起来我到 GitHub 的资源链接在小提琴中不起作用。不过,您应该可以让它在本地滚动。

    祝你好运!

    【讨论】:

    • 你完全正确!这将教会我在本地而不是在 github 上阅读文档:-/ 也感谢 hiddenOrder 的提示。像魅力一样工作!
    • 我在使用hiddenOrder 技术时遇到了一个小问题,数字出现在我将鼠标悬停在绘图上时添加的工具提示中。这是因为工具提示div 绝对定位在body 标记内,而不是flot #placeholder 的后代。解决方案只是确保您也在工具提示 div 中应用样式:#placeholder a.hiddenOrder, #tooltip a.hiddenOrder {display:none;}
    • 感谢您的回答,尽管我最终手动合并了 jquery.flot.js 中的“insertLegend”函数。更新整个文件给我带来了一些对齐和演示问题。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-07-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-05-27
    • 2021-07-06
    • 1970-01-01
    相关资源
    最近更新 更多