Wyświetl etykietę w podpowiedzi, ale nie na osi X dla wykresu liniowego chartjs

Question

Aktualnie używam wykresu liniowego z chart.js i mam zestaw etykiet, który wygląda tak: ["January 2015", "February 2015", "March 2015", "April 2015", "May 2015", "June 2015"]. Chcę, aby odpowiednia etykieta pojawiła się w etykiecie narzędzia dla wykresu, ale chce tylko, aby każda zmienna etykieta pojawiała się na osi X wykresu, aby zapobiec stłoczeniu. Czy jest sposób, w jaki mogę to osiągnąć?

Obecnie zastępuję co drugą wartość z mojej tablicy znakiem "", ale podczas gdy usuwa ona tłumienie z mojej osi X, nie spełnia mojego wymogu, aby pokazać etykietę w etykiecie narzędzia.

Answer 1

Wystarczy przedłużyć wykres liniowy i wymienić xLabels nie chcesz po inicjalizacji

Chart.types.Line.extend({ 
    name: "LineAlt", 
    initialize: function (data) { 
     Chart.types.Line.prototype.initialize.apply(this, arguments); 
     var xLabels = this.scale.xLabels 
     xLabels.forEach(function (label, i) { 
      if (i % 2 == 1) 
       xLabels[i] = ''; 
     }) 
    } 
}); 


var lineChartData = { 
    labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], 
    datasets: [ 
     { 
      fillColor: "#79D1CF", 
      strokeColor: "#79D1CF", 
      data: [59, 80, 81, 56, 55, 40, 34, 43, 43, 12, 65, 65] 
     } 
    ] 
}; 

var ctx = document.getElementById("myChart").getContext("2d"); 
var myLine = new Chart(ctx).LineAlt(lineChartData); 

---

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

---

Answer 2

Aby przedłużyć na potatopeelings odpowiedź, możemy zrobić:

var xLabels = this.scale.xLabels 
var modVal = Math.ceil(xLabels.length/10)      
xLabels.forEach(function (label, i) 
{ 
    if (i % modVal != 0) 
     xLabels[i] = ''; 
}) 

Ograniczenie liczby etykiet (w tym przypadku 10), aby etykiety nigdy nie były zatłoczone, niezależnie od liczby posiadanych punktów danych.

Answer 3

Dla każdego, kto chce osiągnąć to na wykresie JS V2 dodaje zadziała:

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


       var xLabels = data.ticks; 

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

Następnie przejść do opcji zmienne jak zwykle w:

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

Answer 4

Na Opcje wykresu, pod xAxes ciebie można określić właściwość maxTickLimit na dowolne:

xAxes: [{ 
     ticks: { 
     autoSkip:true, 
     maxTicksLimit:3 
     } 
    }] 

Fiddle: https://jsfiddle.net/p63z7zys/1/

Answer 5

To była jedna z najtrudniejszych rzeczy, z którymi mam do czynienia podczas korzystania z ChartJs.

Mam zamiar podzielić się moim rozwiązaniem: po prostu bawiłem się opcjami wykresu. Najpierw zdefiniuję niektóre właściwości dla mojego xAxe. Zauważ, że jestem formatowania etykiety z zastosowaniem zwrotnego:

scales: { 
    xAxes: [{ 
     id: "x-", stacked: false, ticks: { 
     autoSkip: false, callback: (label) => { return label + "TEST" } } 
     } 
    ]} 

Aby sformatować tytuł podpowiedzi Mam zamiar użyć callbacków opcje dla podpowiedzi:

tooltips: { 
     callbacks: { 
      title : (tooltipItems, data) => { 
       var labelIndex = tooltipItems[0].index; 
       var realLabel = data.labels[labelIndex]; 
       return realLabel + "TOOLTIP"; 
     } 
    } 
    } 

Korzystanie Opcje wykresu w ten sposób, mogę pokazać inną treść etykiet osi X i odpowiadające im etykiety narzędzi:

enter image description here

Możesz znaleźć pełną próbkę here.

Mam nadzieję, że to pomoże.