使用flot显示x轴和y轴线而没有网格线 [英] display x-axis and y-axis lines with out the grid lines using flot

问题描述

我正在使用flot来显示条形图.当我将tickLength设置为0时，它隐藏了垂直线和水平线，但也隐藏了x轴和y轴线.我需要没有垂直和水平网格线的x轴和y轴.有办法吗?

I am using flot to display bar charts. When I set the tickLength to 0, it hides the vertical and horizontal lines but it also hides the x-axis and y-axis lines. I need the x-axis and y-axis with out the vertical and horizontal grid lines. Is there a way to do this?

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

Please see the second chart in the image. That is what I want.

推荐答案

这比我想象的要棘手.我唯一能想到的就是禁用边界线和轴线，而不是手动将其重新添加:

This trickier than I thought it would be. The only thing I can come up with is to disable the border and axis lines, than add them back in manually:

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

产生:

这篇关于使用flot显示x轴和y轴线而没有网格线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！