使用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,则必须手动更改标记.