Chart.js লাইন চার্টে সীমাবদ্ধ লেবেল সংখ্যা

Question 1

আমি প্রাপ্ত তথ্য থেকে আমার চার্টে সমস্ত পয়েন্ট প্রদর্শন করতে চাই, তবে আমি তাদের জন্য সমস্ত লেবেল প্রদর্শন করতে চাই না, কারণ চার্টটি খুব বেশি পঠনযোগ্য নয়। আমি এটি ডক্সে খুঁজছিলাম, তবে এমন কোনও পরামিতি খুঁজে পেলাম না যা এটি সীমাবদ্ধ রাখবে।

উদাহরণস্বরূপ আমি কেবল তিনটি লেবেল নিতে চাই না, কারণ চার্টটিও তিন পয়েন্টের মধ্যে সীমাবদ্ধ। এটা কি সম্ভব?

আমার এখনই এরকম কিছু রয়েছে:

আমি যদি প্রতি তৃতীয়-চতুর্থ লেবেলটি কেবল রেখে দিতে পারি তবে দুর্দান্ত হবে। তবে আমি লেবেলগুলির বিকল্প সম্পর্কে একেবারে কিছুই পাইনি।

Question 2

options.scales.xAxes.ticks.maxTicksLimitবিকল্পটি যুক্ত করার চেষ্টা করুন :

xAxes: [{
    type: 'time',
    ticks: {
        autoSkip: true,
        maxTicksLimit: 20
    }
}]

Question 3

সংক্ষিপ্ততার জন্য, আসুন আপনার লেবেলের আসল তালিকাটি দেখে মনে হচ্ছে:

["0", "1", "2", "3", "4", "5", "6", "7", "8"]

যদি আপনি কেবল প্রতি চতুর্থ লেবেল প্রদর্শন করতে চান তবে আপনার লেবেলের তালিকাটি ফিল্টার করুন যাতে প্রতি চতুর্থ লেবেল ভরাট হয় এবং অন্য সমস্ত খালি স্ট্রিং থাকে (যেমন ["0", "", "", "", "4", "", "", "", "8"])।

Question 4

চার্ট জেএস ভি 2 তে যে কেউ এটি অর্জন করতে চাইছেন তাদের জন্য নিম্নলিখিতগুলি কাজ করবে:

 var options =  {  
         scales: {
            xAxes: [{
                afterTickToLabelConversion: function(data){


                    var xLabels = data.ticks;

                    xLabels.forEach(function (labels, i) {
                        if (i % 2 == 1){
                            xLabels[i] = '';
                        }
                    });
                } 
            }]   
        }
}

তারপরে অপশনগুলি ভেরিয়েবলটি যথারীতি একটিতে পাস করুন:

myLineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});`

Question 5

হালনাগাদ:

আমি এনইকের চার্ট.জেএস মাস্টার শাখা থেকে সর্বশেষ টান (জানুয়ারী 27, 2014) দিয়ে আমার কাঁটাচামচ আপডেট করেছি। https://github.com/hay-wire/Chart.js/tree/showXLabels

মূল উত্তর:

যারা এখনও এই সমস্যাটির মুখোমুখি হচ্ছেন, আমি একই সমস্যাটি সমাধান করার জন্য কিছুক্ষণ আগে চার্ট.জেসকে সংযুক্ত করেছিলাম। আপনি এটি পরীক্ষা করে দেখতে পারেন: https://github.com/hay-wire/Chart.js/tree/skip-xlabels => পুরানো শাখা! সর্বশেষ টানার জন্য শোএলবেলগুলি শাখা পরীক্ষা করুন।

ব্যবহারবিধি:

চার্ট এবং লাইন চার্টে বার প্রযোজ্য।

ব্যবহারকারী এখন একটি পাস করতে পারেন { showXLabels: 10 } কেবলমাত্র 10 টি লেবেল প্রদর্শন (এক্স অক্ষে উপস্থিত মোট লেবেলের সংখ্যার উপর নির্ভর করে প্রকৃত প্রদর্শিত লেবেলগুলির সংখ্যাটি কিছুটা আলাদা হতে পারে তবে এটি এখনও 10 এর কাছাকাছি থাকবে)

যখন প্রচুর পরিমাণে ডেটা থাকে তখন অনেক সাহায্য করে। এর আগে আঁকাবাঁকা জায়গাতে একে অপরের উপরে টানা এক্স অক্ষের লেবেলের কারণে গ্রাফটি বিধ্বস্ত দেখায়। এর সাথে showXLabels, ব্যবহারকারীর কাছে এখন লেবেলের সংখ্যা যে কোনও সংখ্যক লেবেল তার কাছে উপলব্ধ জায়গাতে ভাল ফিট করতে পারে তা হ্রাস করার নিয়ন্ত্রণ রয়েছে।

তুলনার জন্য সংযুক্ত চিত্রগুলি দেখুন।

বিনা showXLabelsবিকল্প : এখানে চিত্র বর্ণনা লিখুন

সঙ্গে { showXLabels: 10 }বিকল্পে পাস : এখানে চিত্র বর্ণনা লিখুন

এটিতে এখানে কিছু আলোচনা রয়েছে: https://github.com/nnnick/Chart.js/pull/521#issuecomment-60469304

Question 6

অক্ষ ঘোরার জন্য

এটা ব্যবহার কর:

          scales: {
        xAxes: [
          {
            // aqui controlas la cantidad de elementos en el eje horizontal con autoSkip
            ticks: {
              autoSkip: true,
              maxRotation: 0,
              minRotation: 0
            }
          }
        ]
      }

Question 7

মতে chart.js GitHub ইস্যু # 12 । বর্তমান সমাধানগুলির মধ্যে রয়েছে:

2.0 আলফা ব্যবহার করুন (উত্পাদন নয়)
খুব বেশি ভিড় হয়ে উঠলে এক্স-অক্ষগুলি লুকিয়ে রাখুন (মোটেই গ্রহণ করতে পারবেন না)
ম্যানুয়ালি এক্স-অক্ষের লেবেল এড়িয়ে যাওয়া নিয়ন্ত্রণ করুন (প্রতিক্রিয়াশীল পৃষ্ঠায় নেই)

যাইহোক, কয়েক মিনিটের পরে, আমি মনে করি এর থেকে আরও ভাল সমাধান আছে।

নিম্নলিখিত স্নিপেট স্বয়ংক্রিয়ভাবে লেবেলগুলি আড়াল করবে । xLabelsপ্রার্থনা করার আগে খালি স্ট্রিং দিয়ে সংশোধন করুন draw()এবং তারপরে তাদের পুনরুদ্ধার করুন। আরও বেশি, পুনরায় ঘোরানো এক্স লেবেলগুলি লুকানোর পরে আরও জায়গা থাকায় প্রয়োগ করা যেতে পারে।

var axisFixedDrawFn = function() {
    var self = this
    var widthPerXLabel = (self.width - self.xScalePaddingLeft - self.xScalePaddingRight) / self.xLabels.length
    var xLabelPerFontSize = self.fontSize / widthPerXLabel
    var xLabelStep = Math.ceil(xLabelPerFontSize)
    var xLabelRotationOld = null
    var xLabelsOld = null
    if (xLabelStep > 1) {
        var widthPerSkipedXLabel = (self.width - self.xScalePaddingLeft - self.xScalePaddingRight) / (self.xLabels.length / xLabelStep)
        xLabelRotationOld = self.xLabelRotation
        xLabelsOld = clone(self.xLabels)
        self.xLabelRotation = Math.asin(self.fontSize / widthPerSkipedXLabel) / Math.PI * 180
        for (var i = 0; i < self.xLabels.length; ++i) {
            if (i % xLabelStep != 0) {
                self.xLabels[i] = ''
            }
        }
    }
    Chart.Scale.prototype.draw.apply(self, arguments);
    if (xLabelRotationOld != null) {
        self.xLabelRotation = xLabelRotationOld
    }
    if (xLabelsOld != null) {
        self.xLabels = xLabelsOld
    }
};

Chart.types.Bar.extend({
    name : "AxisFixedBar",
    initialize : function(data) {
        Chart.types.Bar.prototype.initialize.apply(this, arguments);
        this.scale.draw = axisFixedDrawFn;
    }
});

Chart.types.Line.extend({
    name : "AxisFixedLine",
    initialize : function(data) {
        Chart.types.Line.prototype.initialize.apply(this, arguments);
        this.scale.draw = axisFixedDrawFn;
    }
});

দয়া করে লক্ষ্য করুন যে cloneএটি একটি বাহ্যিক নির্ভরতা।

Question 8

আমার একই ধরণের ইস্যু ছিল এবং আমার নির্দিষ্ট ইস্যু শো লেবেলটি সরঞ্জামদণ্ডে দেওয়া হয়েছিল তবে চার্টজ লাইন চার্টের জন্য x অক্ষে নয় । এটি আপনাকে সহায়তা করে কিনা দেখুন

Question 9

এই উত্তর কবজির মতো কাজ করে।

আপনি যদি cloneফাংশনটি সম্পর্কে ভাবছেন তবে এটি ব্যবহার করে দেখুন:

var clone = function(el){ return el.slice(0); }

Question 10

Chart.js ফাইলটিতে আপনার খুঁজে পাওয়া উচিত (আমার জন্য 884 লাইনে)

var Line = function(...
    ...
    function drawScale(){
        ...
        ctx.fillText(data.labels[i], 0,0);
        ...

আপনি শুধু যে এক লাইন কল মোড়ানো তাহলে fillTextসঙ্গে if ( i % config.xFreq === 0){ ... } এবং তারপর chart.Line.defaultsঅ্যাড কিছু লাইন xFreq : 1আপনি ব্যবহার শুরু করতে সক্ষম হওয়া উচিত xFreqআপনার optionsআপনি কল যখনnew Chart(ctx).Line(data, options) ।

মনে মনে হ'ল এটি বেশ হ্যাকি।