使用flot显示x轴和y轴线，不带网格线

Question

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

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

Answer 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" }]
        }
      }
    );
});

产地：

Answer 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，则必须手动更改标记。

Answer 3

设置

  

xaxis：{tickLength：0}，yaxis：{tickLength：0}

也会隐藏网格线。

Answer 4

对于（0,0）原点的情况，您可以通过绘制左下边框线来伪造轴：

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

Answer 5

尝试将线条涂成白色（或bg颜色）

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