Ukryj etykiety na ChartJS x-osiowych

Question

chcę ukryć etykiety na osi x jak mam rozwiązanie, aby ustawić

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

ale w tym przypadku etykiet są również uzyskiwanie ukryte na podpowiedzi. Chcę wyświetlać etykiety na pasku po najechaniu kursorem, ale nie chcę pokazywać tych etykiet na osi X. Jak również zakłóca mój UX, ponieważ szerokość wykresów jest zbyt niska.

Spędziłem za dużo czasu, ale nie mogłem znaleźć rozwiązania, aby pozbyć się etykiet osi X. Proszę tutaj mi pomóc ....

Answer 1

można rozszerzyć wykres, aby to zrobić, tak jak

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] = ''; 
    } 
}); 

i nazywają to jak tak

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

---

Fiddle - http://jsfiddle.net/kq3utvnu/

---

Dzięki @Samuele for wskazując to! W przypadku naprawdę długich etykiet musisz ustawić etykiety na coś krótszego, a następnie przywrócić je do oryginalnych (w elementach wykresu), aby pod etykietą nie było spacji pod osią X.

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] = ''; 
    } 
}); 

---

Fiddle - http://jsfiddle.net/nkbevuoe/

Answer 2

udało mi się ukryć etykiety na osi x, zachowując tytuł w dymku, wykonując następujące czynności:

• W danych wykresu : labels: [""]
• W opcjach wykresu dodaj linię object.label = "ToolTipTitle";, określającą wartości, które powinny zostać zwrócone

Answer 3

myślę, że coś można zrobić z opcji ustawień w najnowszych wersjach chartjs:

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