在 Flot 中，是不是可以在不消除相应标签的情况下消除或隐藏网格刻度？

Posted 2023-05-08

【中文标题】在 Flot 中，是不是可以在不消除相应标签的情况下消除或隐藏网格刻度？

【英文标题】：In Flot, is it possible to eliminate or hide grid ticks without eliminating the corresponding label?在 Flot 中，是否可以在不消除相应标签的情况下消除或隐藏网格刻度？

【发布时间】：2010-09-15 06:07:47

【问题描述】：

Flot API documentation 描述了库中用于自定义图形轴的大量钩子。您可以为每个轴分别设置刻度数、颜色等。但是，我不知道如何防止 Flot 在不删除 x 轴标签的情况下绘制垂直网格线。我尝试更改 tickColor、ticks 和 tickSize 选项，但没有成功。

我想创建漂亮的、与 Tufte 兼容的图表，例如：

http://www.robgoodlatte.com/wp-content/uploads/2007/05/tufte_mint.gif http://www.argmax.com/mt_blog/archive/RealGDP_graph.jpg

我发现我的图表上的垂直刻度是图表垃圾。我正在处理一个显示为垂直条的时间序列，因此垂直刻度通常会以一种视觉上嘈杂的方式穿过这些条。

【问题讨论】：

链接已损坏。

我们可以接受来自@dkrape 的超过 20 票的答案，哪个是最新的？

【参考方案1】：

正如劳里曼所说，Flot 不断发展。 API 中添加了对此进行控制的功能（如 Nelson 链接到的 flot 问题中所述）。

如果您下载最新版本（仍标记为 0.6），您可以使用“tickLength”禁用轴上的线，如下所示：

xaxis: 
  tickLength: 0

相当烦人的是，API 文档中并未更新此新增内容。

【讨论】：

好点凯文。是的，我也必须从后备箱中获取它。他们应该迭代版本号并将其添加到主下载中。

当我查看时，该添加已在主干的 API 文档中进行了更新。它不在其中一个下载中，您必须从存储库中获取 JS 和 API 文档。

@KevinLewis flot 现已移至 github github.com/flot/flot Googlecode 现已过期

【参考方案2】：

这篇文章比 OP 和 Flot（现在的 0.6 版）晚了两年，在那段时间里可能已经发展了很多，或者可能有比它更好的选择，但无论哪种情况，这都是我的贡献。

我不小心遇到了解决此问题的方法：将网格的刻度颜色的 Alpha 通道设置为完全透明。例如：

var options =   
      grid:   show: true,
               color: "rgb(48, 48, 48)",
               tickColor: "rgba(255, 255, 255, 0)",
               backgroundColor: "rgb(255, 255, 255)"
    ;

为我工作。

【参考方案3】：

经过一番挖掘，我很确定通过 Flot API 是不可能的。不过，如果你真的很脏，你可以这样做 - 我已经发布了一个 modified version of one example 可以做到这一点。 查看源代码显示整个丑陋。

【讨论】：

那么将您的方法总结为：1）在轴上使用微小的刻度，这样它们实际上不会出现； 2) 使用具有计算绝对样式的自定义 div 自己构建标签，以确保它们位于正确的位置？

看起来这与 Flot 内部的工作量非常接近 :)

有什么方法可以将它打包并作为补丁提交给他们？ （PS。感谢您的回答；我认为您是对的，现在将接受它。）

是的，就是这样。我已经从绘图函数中复制了一些代码——它们需要一些修改，但我想我可以很快提交它:)

【参考方案4】：

要避免选项中的刻度，只需在相应的轴上给出刻度：[]

【参考方案5】：

从 2009 年 6 月开始，flot issue 167 是对这个确切功能的请求。包括两个实现和一些来自 flot 作者的一致意见，认为这是一个好主意。