chart.jsのカスタム英数字値は？

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

      }); 

それはそれ以外の場合はゼロとしてあなたの最も低い値を入れますと、私はない数値を持っていたとして、エラーを発見するために少し難しかった、あなたはbeginAtZero: trueを置くことが非常に重要です。

はここで最終的な結果だ：

Answer 2

、ChartJSは数値なしで直接2軸をサポートしていません。

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を見て：あなたは私の例で見ることができるようにしかし、あなたはコールバックでこれを達成することができます。

私はそれがあなたを助けてくれることを願っています。