Как создать несколько лейблов Intro Canvas

Question

Я хочу создать группу меток и вложенных меток в x-осях компонента canvas.

У меня сейчас есть только подэлемент, как: RTI_0, RTI_1 ... Я хочу добавить метку к суб-метке, как: RTI = {RTI_1, RTI_2] BB = {BB_0, BB_1, BB_2, BB_3]

<div class="container">
    <div class="row my-3">
        <div class="col">
            <h4>Bootstrap Test</h4>
        </div>
    </div>
    <div class="row my-2">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <canvas id="chBar" height="100"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
  /* chart.js chart examples */

// chart colors
var colors = ['#007bff','#28a745','#444444','#c3e6cb','#dc3545','#6c757d'];

var chBar = document.getElementById("chBar");
var chartData = {
  labels: ["RTI_0", "RTI_1", "RTI_2", "BB_0", "BB_1", "BB_2", "BB_3"],
  datasets: [{
    data: [589, 445, 483, 503, 689, 692, 634],
    backgroundColor: colors[0]
  },
  {
    data: [639, 465, 493, 478, 589, 632, 674],
    backgroundColor: colors[4]
  }]
};

if (chBar) {
  new Chart(chBar, {
  type: 'bar',
  data: chartData,
  options: {
    scales: {
      xAxes: [{
        barPercentage: 0.4,
        categoryPercentage: 0.5
      }],
      yAxes: [{
        ticks: {
          beginAtZero: false
        }
      }]
    },
    legend: {
      display: false
    }
  }
  });
}
</script>

Вместо:

Пожалуйста, помогите

Answer 1

Это возможно только при использовании хаков, как описано в этом выпуске Chart.js .

Вы можете найти бегущую скрипку с другим примером здесь .

В основном это работает так: добавьте вашу метку группировки, разделенную ;, к меткам и измените функции обратного вызова тиков

var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["January;2015", "February;2015", "March;2015", "January;2016", "February;2016", "March;2016"],
    datasets: [{
      label: '# of Votes',
      xAxisID:'xAxis1',
      data: [12, 19, 3, 5, 2, 3]
    }]
  },
  options:{
    scales:{
      xAxes:[
        {
          id:'xAxis1',
          type:"category",
          ticks:{
            callback:function(label){
              var month = label.split(";")[0];
              var year = label.split(";")[1];
              return month;
            }
          }
        },
        {
          id:'xAxis2',
          type:"category",
          gridLines: {
            drawOnChartArea: false, // only want the grid lines for one axis to show up
          },
          ticks:{
            callback:function(label){
              var month = label.split(";")[0];
              var year = label.split(";")[1];
              if(month === "February"){
                return year;
              }else{
                return "";
              }
            }
          }
        }],
      ...

Удачи!