छिपाएं लेबल

Question

मैं स्थापित करने के लिए

$scope.labels = ['', '', '', '', '', '', ''];

लेकिन उस मामले लेबल में भी टूलटिप पर छिपा कर रहे हैं x- अक्ष पर लेबल को छिपाने के लिए के रूप में मैं एक समाधान है चाहता हूँ। मैं चाहता हूं कि बार होवर पर लेबल दिखाना है लेकिन मैं उन लेबलों को एक्स-अक्ष पर दिखाना नहीं चाहता हूं। चूंकि यह मेरे यूएक्स को भी परेशान करता है क्योंकि चार्ट की चौड़ाई बहुत कम है।

मैंने इस पर बहुत अधिक समय बिताया लेकिन एक्स-अक्ष लेबल से छुटकारा पाने के लिए कोई समाधान नहीं मिला। कृपया मुझे यहाँ मदद ....

Answer 1

तुम इतनी

Chart.types.Bar.extend({ 
    name: "BarAlt", 
    initialize: function(data){ 
     Chart.types.Bar.prototype.initialize.apply(this, arguments); 
     var xLabels = this.scale.xLabels; 
     for (var i = 0; i < xLabels.length; i++) 
      xLabels[i] = ''; 
    } 
}); 

की तरह, यह करने के लिए चार्ट का विस्तार करने और यह इतना

var myBarChart = new Chart(ctx).BarAlt(data); 

---

फिडल की तरह कॉल कर सकते हैं - http://jsfiddle.net/kq3utvnu/

---

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

Chart.types.Bar.extend({ 
    name: "BarAlt", 
    initialize: function(data){ 
     var originalLabels = data.labels; 
     data.labels = data.labels.map(function() { return '' }); 

     Chart.types.Bar.prototype.initialize.apply(this, arguments); 
     this.datasets[0].bars.forEach(function(bar, i) { 
      bar.label = originalLabels[i]; 
     }); 
     var xLabels = this.scale.xLabels; 
     for (var i = 0; i < xLabels.length; i++) 
     xLabels[i] = ''; 
    } 
}); 

---

फिडल - http://jsfiddle.net/nkbevuoe/

Answer 2

मैं, x- अक्ष पर लेबल को छिपाने के लिए है, जबकि ऐसा करने से टूलटिप में शीर्षक रखने में सक्षम था निम्नलिखित:

• चार्ट डेटा में : labels: [""]
• चार्ट विकल्पों में, object.label = "ToolTipTitle"; जोड़ें जो मान वापस किया जाना चाहिए मान निर्दिष्ट करें

Answer 3

मुझे लगता है कि कुछ आप विकल्पों chartjs के नवीनतम संस्करण में स्थापित करने के साथ यह क्या कर सकते हैं:

options: { 
    scales: { 
     xAxes: [ 
      { 
       ticks: { 
        display: false 
       } 
      } 
     ]; 
    } 
}