如何从Flot图表中删除网格线

Question

我在我的应用程序中使用Flot，它运行良好。我想从图表的背景中删除垂直线和水平线。我尝试了这个方法，但是无法实现该功能。

grid: {
    verticalLines:false,
    horizontalLines:false
}

有人可以在这方面帮助我吗？

- Firoz

Answer 1

您可以删除这些线条，使用tickLength: 0

$.plot("#flot", dataset,
{
    yaxis: {tickLength:0}, 
    xaxis: {tickLength:0}
});

在这里尝试Fiddle。

运行演示：

$(function () {

someData = [[1, 3],
            [2, 16],
            [3, 3],
            [4, 3],
            [5, 8],
            [6, 12],
            [7, 3]];
    
var dataset = [
    {color: "#edc240", data: someData, lines: {show: true}, points: {show: true}}    
]; 
    $.plot("#flot", dataset,
    {
        yaxis: {tickLength:0}, 
        xaxis: {tickLength:0}
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<div id="flot" style="width:500px;height:300px;margin:20px"></div>

- Mark

---

你可以删除这些行！+1 :) - Sergio

Answer 2

您可以将它们涂成与背景相同的颜色。

有一个名为tickColor的选项，您必须在两个轴上都使用它：

var options = {
    yaxis: {
        tickColor: "#f00" // or same color as background
    },
    xaxis: {
        tickColor: "#0f0" // or same color as background
    }
};

Fiddle

- Sergio