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কালো (স্বচ্ছ রঙ) এ সেট করছে। সুতরাং এটি ডিভের পটভূমির রঙ নির্বিশেষে কাজ করা উচিত।

— এক্সসিএস 11

বা প্রদর্শনটি ব্যবহার করুন: "রঙ" এর পরিবর্তে মিথ্যা

— ইরভিনাইন

আপনাকে অনেক ধন্যবাদ! যদি কেবল ডকুমেন্টেশনই এই বিষয়টিতে কিছুটা পরিষ্কার হত। :)

— আইএসএস

আমি স্কেলটি রাখতে চেয়েছিলাম কিন্তু চার্টের পিছনে গ্রিডলাইনগুলি হারাতে চাইছি যাতে এই উত্তরটি আমার পক্ষে কার্যকর হয়নি।

— এডজি

যদিও এই প্রথম উত্তরটি পছন্দসই ছবিতে পেতে পারে, এটি কিছুটা হ্যাক। দ্বিতীয় সমাধান, যা প্রকৃতপক্ষে গ্রিডলাইন প্রদর্শন বৈশিষ্ট্যটিকে মিথ্যা হিসাবে সেট করে, এটি আরও সঠিক বলে মনে হয়।

— টট জ্যাম

Answer 2

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

Comments

এই উত্তরটি আমাকে স্কেল রাখতে দেয় কিন্তু চার্টে গ্রিডলাইনগুলি আঁকতে দেয় না।

— এডিজি

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

নীচের কোডটি চার্ট অঞ্চল থেকে গ্রিড লাইনগুলি সরিয়ে দেয় কেবল এক্স ও ওয়াই অক্ষ লেবেলগুলিতে নয়

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