Chart.js v2 - ग्रिड लाइनों को छिपाना

Question

मैं एक सरल रेखा चार्ट बनाने के लिए Chart.js v2 का उपयोग कर रहा हूं। सब कुछ ठीक लग रहा है, सिवाय ग्रिड लाइनों के जो मुझे नहीं चाहिए:

लाइन चार्ट के लिए प्रलेखन यहाँ है: https://nnnick.github.io/Chart.js/docs-v2/#line-chart , लेकिन मुझे उन "ग्रिड लाइन्स" को छिपाने के बारे में कुछ नहीं मिला।

मैं ग्रिड लाइनों को कैसे हटा सकता हूं?

Answer 1

मुझे एक समाधान मिला जो एक लाइन चार्ट में ग्रिड लाइनों को छिपाने के लिए काम करता है।

gridLinesडिव के बैकग्राउंड कलर की तरह ही कलर सेट करें ।

var options = {
    scales: {
        xAxes: [{
            gridLines: {
                color: "rgba(0, 0, 0, 0)",
            }
        }],
        yAxes: [{
            gridLines: {
                color: "rgba(0, 0, 0, 0)",
            }   
        }]
    }
}

या उपयोग करें

var options = {
    scales: {
        xAxes: [{
            gridLines: {
                display:false
            }
        }],
        yAxes: [{
            gridLines: {
                display:false
            }   
        }]
    }
}

Comments

यह वास्तव में ग्रिडलाइन रंग को एक 0 opacityकाले (एक पारदर्शी रंग) के लिए सेट कर रहा है। तो यह div की पृष्ठभूमि के रंग की परवाह किए बिना काम करना चाहिए।

— XCS

या प्रदर्शन का उपयोग करें: "रंग" के बजाय झूठा

— इरविन

आपका बहुत बहुत धन्यवाद! यदि इस विषय पर केवल प्रलेखन थोड़ा स्पष्ट था। :)

— आईएसएस

मैं पैमाने को बनाए रखना चाहता था लेकिन चार्ट के पीछे ग्रिडलाइंस खो देता था इसलिए यह जवाब मेरे काम नहीं आया।

— adg

हालांकि यह पहला उत्तर वांछित चित्र को मिल सकता है, यह एक हैक का एक सा है। दूसरा समाधान, जो वास्तव में ग्रिडलाइन डिस्प्ले प्रॉपर्टी को झूठा सेट करता है, अधिक सही प्रतीत होता है।

— टोट ज़म

Answer 2

options: {
    scales: {
        xAxes: [{
            gridLines: {
                drawOnChartArea: false
            }
        }],
        yAxes: [{
            gridLines: {
                drawOnChartArea: false
            }
        }]
    }
}

Comments

इस उत्तर ने मुझे पैमाना बनाए रखने की अनुमति दी लेकिन चार्ट पर ग्रिडलाइंस नहीं खींची।

— adg

Answer 3

यदि आप चाहते हैं कि वे डिफ़ॉल्ट रूप से चले गए हैं, तो आप सेट कर सकते हैं:

Chart.defaults.scale.gridLines.display = false;

Answer 4

यदि आप ग्रिडलाइन्स छिपाना चाहते हैं, लेकिन yAxes दिखाना चाहते हैं, तो आप सेट कर सकते हैं:

yAxes: [{...
         gridLines: {
                        drawBorder: true,
                        display: false
                    }
       }]

Answer 5

ठीक है, कोई बात नहीं .. मुझे चाल पता चली:

    scales: {
      yAxes: [
        {
          gridLines: {
                lineWidth: 0
            }
        }
      ]
    }

Answer 6

नीचे दिए गए कोड चार्ट क्षेत्र से ग्रिड लाइनों को हटाते हैं न कि केवल x & y अक्ष लेबल में

Chart.defaults.scale.gridLines.drawOnChartArea = false;