फ़्लोट

Question

का उपयोग कर ग्रिड लाइनों के साथ एक्स-अक्ष और वाई-अक्ष लाइनों को प्रदर्शित करें मैं बार चार्ट प्रदर्शित करने के लिए फ़्लोट का उपयोग कर रहा हूं। जब मैं टिकलेंथ 0 पर सेट करता हूं, तो यह लंबवत और क्षैतिज रेखाओं को छुपाता है लेकिन यह एक्स-अक्ष और वाई-अक्ष लाइनों को भी छुपाता है। मुझे लंबवत और क्षैतिज ग्रिड लाइनों के साथ एक्स-अक्ष और वाई-अक्ष की आवश्यकता है। क्या इसे करने का कोई तरीका है?

कृपया छवि में दूसरा चार्ट देखें। वह जो मैं चाहता हूँ।

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

एक (0,0) मूल के मामले के लिए, आप कर सकते हैं नकली बस नीचे बनाकर कुल्हाड़ियों और छोड़ दिया सीमा लाइनों:

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

Answer 4

xaxis स्थापना: {tickLength: 0 }, याक्सिस: {टिकलेंथ: 0}

भी ग्रिड लाइनों को छुपाएगा।

Answer 5

सफेद में लाइनें (या अपने bg-रंग)

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