Label in Tooltip, aber nicht in x-Achse für chartjs Liniendiagramm anzeigen

Question

Ich verwende derzeit ein Liniendiagramm mit chart.js und habe einen Labelsatz, der so aussieht ["January 2015", "February 2015", "March 2015", "April 2015", "May 2015", "June 2015"]. Ich möchte, dass das entsprechende Label im Tooltip für das Diagramm angezeigt wird, aber nur jedes alternierende Label auf der X-Achse des Diagramms angezeigt werden soll, um Crowding zu vermeiden. Gibt es eine Möglichkeit, dies zu erreichen?

Ich ersetze derzeit jeden zweiten Wert von meinem Array mit "", aber während das die Überfüllung von meiner X-Achse entfernt, erfüllt es nicht meine Anforderung, das Etikett im Tooltip anzuzeigen.

Answer 1

verlängern einfach die Liniendiagramm und ersetzen Sie die xLabels Sie nach Ihrer Initialisierung wollen nicht

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

auf potatopeelings zu verlängern Antwort, wir können tun:

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

um die Anzahl der Etiketten (in diesem Fall 10) zu begrenzen, so dass Ihre Etiketten niemals überfüllt sein werden, egal wie viele Datenpunkte Sie haben.

Answer 3

Für alle, die diese JS V2 auf Diagramm zu erreichen, wird folgende Arbeiten:

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


       var xLabels = data.ticks; 

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

Dann Variable die Optionen passieren, wie üblich in einem:

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

Answer 4

Auf Diagrammoptionen unter xAxes Sie angeben können die maxTickLimit Eigenschaft auf, was auch immer Sie mögen:

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

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

Answer 5

Dies war eines der schwierigsten Dinge, die ich mit ChartJs umgehen.

Ich werde meine Lösung teilen: Ich habe gerade mit den Diagrammoptionen gespielt. Zuerst werde ich einige Eigenschaften für meine xAxe definieren. Beachten Sie, dass ich die Formatierung des Etiketts mit dem Rückruf:

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

den Tooltip Titel zu formatieren Ich werde Rückrufe Optionen für die Tooltips verwenden:

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

Verwendung Mit den Diagrammoptionen kann ich verschiedene Inhalte für die X-Achsen-Beschriftungen und die entsprechenden Tooltip-Titel anzeigen:

enter image description here

Sie können die vollständige Probe here finden.

Hoffe, das hilft.