चार्ट.जेएस लाइन चार्ट पर लेबल नंबर को सीमित करें

Question

मैं अपने चार्ट के सभी बिंदुओं को मेरे द्वारा प्राप्त डेटा से प्रदर्शित करना चाहता हूं, लेकिन मैं उनके लिए सभी लेबल प्रदर्शित नहीं करना चाहता, क्योंकि तब चार्ट बहुत पठनीय नहीं है। मैं इसे डॉक्स में ढूंढ रहा था, लेकिन ऐसा कोई भी पैरामीटर नहीं मिला जो इसे सीमित करता हो।

मैं उदाहरण के लिए केवल तीन लेबल नहीं लेना चाहता, क्योंकि तब चार्ट भी तीन बिंदुओं तक सीमित है। क्या यह संभव है?

मेरे पास अभी ऐसा कुछ है:

अगर मैं हर तीसरे-चौथे लेबल को छोड़ सकता हूं, तो यह बहुत अच्छा होगा। लेकिन मुझे लेबल विकल्पों के बारे में बिल्कुल कुछ नहीं मिला।

Comments

क्या आप लिंक प्रदान कर सकते हैं?

— धीरज

वेबसाइट के लिए नहीं, मैं एंड्रॉइड पर ऐप कर रहा हूं और यह चार्ट मेरे स्थानीय पेज पर है ..

— mmmm

कृपया निर्दिष्ट करें कि आप DevExpress या Chart.js द्वारा किस लाइब्रेरी का उपयोग करते हैं?

— पावेल ग्रुबा

@mmmm क्या आपने कुछ पता लगाया? मैंने नीचे निकिता के जवाब की कोशिश की, लेकिन इसने मुझे इस अजीब अंतर के साथ छोड़ दिया: jsfiddle.net/askhflajsf/xzk6sh1q

— मार्क बोल्डर

निकिता का जवाब सही लगता है। @mmmm, कृपया इसे सही उत्तर के रूप में चिह्नित करने पर विचार करें stackoverflow.com/a/39326127/179138

— Caio Cunha

Answer 1

options.scales.xAxes.ticks.maxTicksLimitविकल्प जोड़ने का प्रयास करें :

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

Comments

ऊपर दिए गए उत्तर प्लस इस जवाब में यहां stackoverflow.com/a/37257056/558094 , बम है।

— विनायक गर्ग

यहाँ कुछ गलत है। मुझे पिछले दो टिक्स के बीच एक बड़ा अंतर मिल रहा है: jsfiddle.net/askhflajsf/xzk6sh1q

— मार्क बोल्डर

आपको यह जानकारी कहां से मिली? बहुत सारे unswers मैं चार्ट.js के लिए पढ़ रहा हूँ - मैं उनके डॉक्स में नहीं पा रहा हूँ चार्टjs.org/docs/latest , क्या मुझे कुछ ऐसी जगह याद आ रही है जहाँ मैं वास्तव में उन सभी छोटे गुणों और अति-योग्य दस्तावेज़ों को ढूँढ सकता हूँ?

— मैक्स यारी

साहब, आप कमाल के हैं!

— जे गीथ

आप यह भी जोड़ सकते हैं maxRotation: 0कि आप चाहते हैं कि लेबल छोड़ने से पहले इसे घुमाएं नहीं।

— Caio Cunha

Answer 2

संक्षिप्तता के लिए, मान लें कि आपकी लेबल की मूल सूची इस प्रकार है:

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

यदि आप केवल हर 4 वें लेबल को प्रदर्शित करना चाहते हैं, तो अपनी लेबल की सूची को फ़िल्टर करें ताकि हर 4 वें लेबल भरा हो, और अन्य सभी रिक्त स्ट्रिंग (जैसे ["0", "", "", "", "4", "", "", "", "8"]) हैं।

Comments

यह एक महान हैक है, धन्यवाद! मैंने इसे यहां जोड़ा ।

— १२:१२ बजे ट्रूफ़ा

मन जो गुजर रहा है ""वह ग्राफ पर संबंधित टूलटिप्स को भी हटा देता है!

— हेविवर

जब तक मैं गलत हूं यह आसानी से एक सूची समझ के साथ किया जा सकता है यदि आप चाहते हैं कि उदाहरण के लिए हर 10 वें लेबल को दिखाया जाए my_labels = [my_labels[i] if i % 10 == 0 else "" for i in range(len(my_list))]:। प्रक्रिया के आसान पैरामीटर के लिए फ़ाइल की शुरुआत में नंबर 10 को निश्चित रूप से एक स्थिर घोषित किया जा सकता है।

— pkaramol

यह भी बिना किया जा सकता है "", जैसा कि इस सवाल के जवाब में चार्ट के साथ ऊर्ध्वाधर गर्ड लाइन मुद्दा है। जहां ओपी के पास काली रेखा के साथ एक मुद्दा था वह इस दोहरे उद्धरण की पहली घटना पर दिखाई देता है, ऐसे मामले में यह मदद करता है, फिर से @ haywire ने उल्लेख किया कि यह टूलटिप से लेबल को हटाता है

— Mi-Creativity

Answer 3

चार्ट JS V2 पर इसे प्राप्त करने की तलाश में किसी के लिए निम्नलिखित काम करेगा:

 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
});`

Answer 4

अपडेट करें:

मैं NNICK के चार्ट.जेएस मास्टर शाखा से नवीनतम कांट (27 जनवरी 2014 तक) के साथ अपने कांटे को अपडेट कर रहा हूं। https://github.com/hay-wire/Chart.js/tree/showXLabels

मूल ANSWER:

अभी भी इस समस्या का सामना कर रहे लोगों के लिए, मैंने उसी समस्या को हल करने के लिए कुछ समय पहले चार्ट.जेएस को छोड़ दिया था। आप इसे देख सकते हैं: https://github.com/hay-wire/Chart.js/tree/skip-xlabels => पुरानी शाखा! नवीनतम पुल के लिए showXLabels शाखा की जाँच करें।

कैसे इस्तेमाल करे:

बार चार्ट और लाइन चार्ट के लिए लागू है।

उपयोगकर्ता अब { showXLabels: 10 }केवल 10 लेबल प्रदर्शित करने के लिए पास कर सकता है (एक्स अक्ष पर मौजूद कुल लेबल की संख्या के आधार पर वास्तविक प्रदर्शित लेबल गिनती थोड़ी भिन्न हो सकती है, लेकिन यह अभी भी 10 के करीब रहेगी)

बहुत बड़ी मात्रा में डेटा होने पर बहुत मदद करता है। इससे पहले, क्रैम्प्ड स्पेस में एक दूसरे के ऊपर खींचे गए एक्स अक्ष लेबल के कारण ग्राफ तबाह हो जाता था। साथ showXLabels, उपयोगकर्ता अब नियंत्रण लेबल में चाहे जितने के लिए लेबल की संख्या कम करने के लिए अंतरिक्ष उसे करने के लिए उपलब्ध में अच्छा फिट।

तुलना के लिए संलग्न चित्र देखें।

showXLabelsविकल्प के बिना :

{ showXLabels: 10 }विकल्प में पारित होने के साथ :

इस पर कुछ चर्चा यहां दी गई है: https://github.com/nnnick/Chart.js/pull/521#issuecomment-60469304

Comments

इस का उपयोग करना पसंद करेंगे, लेकिन मुझे कुछ गलत करना चाहिए। मैंने संदर्भित github.com/hay-wire/Chart.js/blob/showXLabels/Chart.js लेकिन (30 अक्टूबर, 2015 के अनुसार) यह काम नहीं करता है और वाक्यांश "showXbabels" भी शामिल नहीं है। पुराने एक, github.com/hay-wire/Chart.js/blob/skip-xlabels/Chart.js पर , ठीक काम करता है। मुझे नवीनतम के एक कामकाजी, टैग किए गए संस्करण को प्राप्त करना अच्छा लगेगा, इसलिए मैं इसे रॉगिट से सुरक्षित रूप से सीडीएन-लिंक कर सकता हूं। यह फिडल (जबकि सिर्फ मुद्दे के लिए आसुत नहीं है) दिखाता है कि मेरा क्या मतलब है: jsfiddle.net/45cLcxdh/14

— rkagerer

इस का उपयोग करने की कोशिश की, लेकिन ऐसा लगता है कि 'Chart.Line.js' का उपयोग नहीं किया जाता है, इस प्रकार कुछ भी नहीं बदलता है। मैंने "नया चार्ट (ctx) .लाइन (डेटा, विकल्प);" एक चार्ट बनाने के लिए।

— फ्लाइंगनंबस

चार्ट JS 2.6.0 का उपयोग करना और विकल्प काम नहीं करता है। अंततः मुझे @ बेन का जवाब stackoverflow.com/a/26183983/3319454

— 3bdalla

मुझे लगता है कि यह पिछले संस्करण का एक हिस्सा है

— अलेक्सालेजैंडम

@alexalejandroem हाँ इसका जवाब 2014 में दिया गया था! ;-)

— हेविवर

Answer 5

अक्ष रोटेशन के लिए

इसे इस्तेमाल करो:

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

Answer 6

के अनुसार chart.js GitHub मुद्दे # 12 । वर्तमान समाधानों में शामिल हैं:

1. 2.0 अल्फ़ा (उत्पादन नहीं) का उपयोग करें
2. X- अक्ष को तब छिपाएं जब वह बहुत अधिक भीड़ हो जाए (वह बिल्कुल स्वीकार नहीं कर सकता)
3. एक्स-अक्ष का मैन्युअल रूप से नियंत्रण लेबल स्किप (उत्तरदायी पृष्ठ में नहीं)

हालाँकि, कुछ मिनटों के बाद, मुझे लगता है कि एक बेहतर समाधान है।

निम्नलिखित स्निपेट लेबल को स्वचालित रूप से छिपा देगा । 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एक बाहरी निर्भरता है।

Answer 7

मेरे पास एक समान प्रकार का मुद्दा था, और टूलटिप में मेरे विशिष्ट इश्यू शो लेबल के लिए एक अच्छा समाधान दिया गया था लेकिन चार्टज लाइन लाइन के लिए एक्स अक्ष में नहीं । देखें कि क्या यह आपकी मदद करता है

Answer 8

यह जवाब एक आकर्षण की तरह काम करता है।

यदि आप cloneफ़ंक्शन के बारे में सोच रहे हैं , तो इसे आज़माएं:

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

Answer 9

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में शुरू करने में सक्षम होना चाहिए ।optionsnew Chart(ctx).Line(data, options)

माइंड यू हैव ये हैक्टिक हैप्पी।

Comments

मूल लाइब्रेरी फ़ाइल को कभी न बदलें, जो संस्करण अद्यतन के बाद टूट जाएगी।

— रैप्टर