Benutzerdefinierte alphanumerische Werte in chart.js?

Question

Ich versuche, ein einfaches horizontales Balkendiagramm mit Chart.js mit einigen Sprachen ('Spanisch', 'Englisch', ...) in der y-Achse und seine CEFR Level (von A1 bis C2) in der x-Achse statt von einigen numerischen Ebene (1-10 zum Beispiel).

Gibt es eine Möglichkeit, ein Balkendiagramm ohne reine Zahlenwerte in der X-Achse zu erstellen?

Das ist, was ich bin in diesem Augenblick mit diesem Code erhalten:

var spokenLangChart = new Chart(ctx, { 
       type: 'horizontalBar', 
       data: { 
        labels: ['Spanish', 'English', 'German'], 
        datasets: [{ 
         label: 'CEF Level', 
         labels: ['A1', 'A2', 'B1', 'B2', 'C1', 'C2'], 
         data: ['C2', 'C1', 'B1'], 
         backgroundColor: "rgba(255,153,0,0.4)" 
        }] 
       }, 
       options: { 
        scales: { 
         xAxes: [{ 
          ticks: { 
           beginAtZero: true 
          } 
         }] 
        } 
       } 
      }); 

Answer 1

Also dank Julian Schmuckli konnte ich das beheben. Da es nicht vollständig gelöst wurde, werde ich meine eigene Antwort veröffentlichen, damit ich das Ergebnis teilen kann.

var ctx = document.getElementById('spokenLangChart').getContext('2d'); 
      var xLabels = ['A1', 'A2', 'B1', 'B2', 'C1', 'C2']; 
      var spokenLangChart = new Chart(ctx, { 
       type: 'horizontalBar', 
       data: { 
        labels: ['Spanish', 'English', 'German'], //Put here your x labels 
        datasets: [{ 
         label: 'CEF Level', 
         data: [5, 4, 3], 
         backgroundColor: "rgba(255,153,0,0.4)" 
        }] 
       }, 
       options: { 
        legend: { 
         position: 'bottom' 
        }, 
        title: { 
         display: true, 
         text: 'Spoken Languages' 
        }, 
        scales: { 
         xAxes: [{ 
          ticks: { 
           beginAtZero: true, 
           //Returns the x labels 
           callback: function (value, index, values) { 
            return xLabels[index]; 
           } 
          } 
         }] 
        } 
       } 

      }); 

Es ist sehr wichtig, dass Sie beginAtZero: true setzen, sonst wird es Ihren niedrigsten Wert als Null gesetzt und als ich nicht numerische Werte hatte, war es ein bisschen schwierig, den Fehler zu erkennen.

Hier ist das Endergebnis:

Answer 2

Derzeit ChartJS nicht unterstützt direkt zwei Achsen ohne numerische Werte. Aber man kann dies mit Rückrufen erreichen, wie Sie auf meinem Beispiel sehen können:

var ctx = document.getElementById('chart'); 
 

 
var xLabels = ["A","B","C","D","E","F","G","H","I","J","K"]; //Put here your x labels 
 

 
var spokenLangChart = new Chart(ctx, { 
 
       type: 'horizontalBar', 
 
       data: { 
 
        labels: ['Spanish', 'English', 'German'], //Put here your x labels 
 
        datasets: [{ 
 
         label: 'CEF Level', 
 
         labels: ['A1', 'A2', 'B1', 'B2', 'C1', 'C2'], 
 
         data: ['C2', 'C1', 'B1'], 
 
         backgroundColor: "rgba(255,153,0,0.4)" 
 
        }] 
 
       }, 
 
       options: { 
 
        scales: { 
 
         xAxes: [{ 
 
          ticks: { 
 
           //Returns the x labels 
 
           callback: function(value, index, values) { 
 
            return xLabels[index]; 
 
           } 
 
          }, 
 
         }] 
 
        }, 
 
       }, 
 
       
 
      });

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
 
<canvas id="chart" width="200" height="100"></canvas>

Oder schau dir JSFiddle.

Ich hoffe, es hilft Ihnen.