使用 flot 显示不带网格线的 x 轴和 y 轴线答案

【问题标题】：display x-axis and y-axis lines with out the grid lines using flot使用 flot 显示不带网格线的 x 轴和 y 轴线
【发布时间】：2011-09-15 15:09:36
【问题描述】：

我正在使用 flot 来显示条形图。当我将 tickLength 设置为 0 时，它会隐藏垂直线和水平线，但也会隐藏 x 轴和 y 轴线。我需要没有垂直和水平网格线的 x 轴和 y 轴。有没有办法做到这一点？

请查看图片中的第二张图表。这就是我想要的。

【问题讨论】：

标签： flot

【解决方案1】：

这比我想象的要复杂。我唯一能想到的就是禁用边框和轴线，而不是手动添加它们：

$(function() {
    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
    $.plot($("#placeholder"),
      [{data: d2,
        bars: {
            show: true
        }}
      ],
      {
        xaxis: {
            tickLength: 0
        },
         yaxis: {
            tickLength: 0
        },
        grid: {
           borderWidth: 0,
           aboveData: true,
           markings: [ { xaxis: { from: 0, to: 10 }, yaxis: { from: 0, to: 0 }, color: "#000" },
                       { xaxis: { from: 0, to: 0 }, yaxis: { from: 0, to: 15 }, color: "#000" }]
        }
      }
    );
});

生产：

【讨论】：

谢谢。它帮助我解决了一个类似的问题——在图表上绘制一条水平零轴线。
谢谢，对我也有很大帮助。

【解决方案2】：

标记答案有效，但对于他的数据来说，它的编码有点太硬了。这个好一点：

$(function() {
    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
    $.plot($("#placeholder"),
      [{data: d2,
        bars: {
            show: true
        }}
      ],
      {
        xaxis: {
            tickLength: 0
        },
         yaxis: {
            tickLength: 0
        },
        grid: {
           borderWidth: 0,
           aboveData: true,
           markings: [ { yaxis: { from: 0, to: 0 }, color: "#000" },
                       { xaxis: { from: 0, to: 0 }, color: "#000" }]
        }
      }
    );
});

如果您的图表以不同于 0 的值开始，您必须手动更改标记。

【讨论】：

【解决方案3】：

设置

x轴：{tickLength：0}，y轴：{tickLength：0}

也会隐藏网格线。

【讨论】：

似乎这是对我有用的简单答案，谢谢=)

【解决方案4】：

对于 (0,0) 原点的情况，您可以通过仅绘制底部和左侧边界线来伪造轴：

grid: {
    borderColor: 'black',
    borderWidth: {
        top: 0,
        right: 0,
        bottom: 2,
        left: 2
    },
    ...
}

【讨论】：

【解决方案5】：

尝试将线条涂成白色（或您的背景色）

 yaxis: 
  . . .
  tickColor: "#cccccc" /* or better "#ffffff" */
  . . .

【讨论】：