chart.js의 사용자 정의 alphanumerical 값?

Question

Chart.js과 함께 y 축에 일부 언어 ('스페인어', '영어', ...)와 X 축에 CEFR Level (A1에서 C2까지)이 포함 된 간단한 가로 막 대형 차트를 만들려고합니다. 몇 가지 수치 수준 (예 : 1-10).

x 축에 순수한 수치가없는 막 대형 차트를 표시하는 방법이 있습니까? 이 코드와 지금지고있어 무엇

는 :

현재

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

Julian Schmuckli 덕분에 문제를 해결할 수있었습니다. 완전히 해결되지 않았기 때문에 결과를 공유 할 수 있도록 내 자신의 답변을 게시 할 것입니다.

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]; 
           } 
          } 
         }] 
        } 
       } 

      }); 

그것은 그렇지 않으면 0으로 가장 낮은 값을 넣어 것입니다 내가없는 숫자 값을 가지고로 오류를 탐지하는 약간 어려웠다, 당신은 beginAtZero: true을 넣어하는 것이 매우 중요합니다.

여기에 최종 결과입니다 :

Answer 2

, ChartJS는 수치하지 않고 직접 두 축을 지원하지 않습니다.

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>

또는 JSFiddle보고 :하지만 당신은 내 예에서 볼 수 있듯이 콜백이 작업을 수행 할 수 있습니다.

나는 당신을 도움이되기를 바랍니다.