使用flot顯示網格線的x軸和y軸線

我使用flot來顯示條形圖。當我將tickLength設置爲0時，它隱藏了垂直和水平線，但它也隱藏了x軸和y軸線。我需要X軸和Y軸與垂直和水平網格線。有沒有辦法做到這一點？使用flot顯示網格線的x軸和y軸線

請參閱圖片中的第二個圖表。這就是我想要的。 enter image description here

2011-09-15 Sridhar

這比我想象的要複雜得多。我能想出的唯一一件事就是關閉邊界和軸線，不是增加他們早在手動：

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

產地：

enter image description here

來源

2011-09-19 16:43:24 Mark

感謝。它幫助我解決了一個類似的問題 - 在圖上繪製了一條水平的零軸線。 – dex3703

謝謝，它也幫了我很多。 – Hoffmann

檢查我的答案，以更好地定義標記。 – Hoffmann

馬克答案的作品，但它是一個有點爲他的數據進行硬編碼。這個更好一點：

$(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，你必須手動更改標記。

來源

2012-10-10 20:38:47 Hoffmann

對於（0,0）起源的情況下，可以通過假畫只是左下邊框線的軸和：

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

來源

2013-11-05 01:14:50

設置

x軸：{tickLength：0 }，yaxis：{tickLength：0}

也會隱藏網格線。

來源

2013-12-18 18:59:44 Ryan

看起來像這是我工作的簡單答案，謝謝=） –

嘗試顏色以白色的線（或您的BG-色）

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

來源

2016-03-07 11:27:29 Atara

使用flot顯示網格線的x軸和y軸線

回答

相關問題