y軸に数値の代わりにテキストが表示される

Question

Chart.JSを使用して折れ線グラフのy軸に数値の代わりにテキストを表示することはできますか？

たとえば、次のテキストと値の間にはmappingと記載されています。

我々は代わりに以下のグラフ中の数値の「定住」、「アンダーアクティブ」の言葉などを表示することができますどのように

0 = "sedentary" 
1 = "under-active" 
2 = "active" 
.... 

：

Answer 1

はい、それは可能であり、 y軸のティックに対してuserCallback関数を使用して達成することができます。

var mapText = ['sedentary', 'under-active', 'active', 'inactive']; 
 
var chart = new Chart(canvas, { 
 
    type: 'line', 
 
    data: { 
 
     labels: ['January', 'February', 'March', 'April'], 
 
     datasets: [{ 
 
     label: 'Statistics', 
 
     data: [3, 1, 2, 0], 
 
     backgroundColor: 'rgba(0, 119, 204, 0.1)', 
 
     borderColor: 'rgba(0, 119, 204, 0.8)', 
 
     borderWidth: 1, 
 
     }] 
 
    }, 
 
    options: { 
 
     scales: { 
 
     yAxes: [{ 
 
      ticks: { 
 
       beginAtZero: true, 
 
       maxTicksLimit: 4, //set as the 'mapText' array length 
 
       stepSize: 1, 
 
       userCallback: function(t, i) { 
 
        return mapText[mapText.length - (i + 1)]; 
 
       } 
 
      } 
 
     }] 
 
     } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> 
 
<canvas id="canvas"></canvas>