javascript - ChartJS，条形图标签中的多行

Question

我正在使用 ChartJS 库在 PHP 项目中绘制图表。在条形图中，我想要X 轴上的标签分为两行。

怎么走？

我当前的图表就像

我想要如下所示的图表

这是我的代码片段

<?php   
 $array_data = sql::rows("attendance_summary_report","DateVal between 
 '{$previous_date}' and '{$last_date}' order by DateVal asc");
    //print_r($array_data);
    $level_array=array();
    $pre_array=array();
    $abs_array=array();
    if(is_array($array_data) && count($array_data)>0){
        foreach($array_data as $ad){
            if($ad['DayVal']==''){
                $ad['DayVal']='No Day';
                $ad['present']=0;
                $ad['absent']=0;
            }
            array_push($level_array, 
  $ad['DayVal']."\n".date('d/m',strtotime($ad['DateVal'])));
            array_push($pre_array,$ad['present']);
            array_push($abs_array,$ad['absent']);
        }
    }
 ?>

<script>
  $(function () {
      var areaChartData = {
      labels  : <?php echo json_encode($level_array,true)?>,
      datasets: [......]
    }
    

    var barChartCanvas = $('#barChart').get(0).getContext('2d')
    var barChartData = jQuery.extend(true, {}, areaChartData)
    var temp0 = areaChartData.datasets[0]
    var temp1 = areaChartData.datasets[1]
    barChartData.datasets[0] = temp1
    barChartData.datasets[1] = temp0

    var barChart = new Chart(barChartCanvas, {
      type: 'bar', 
      data: barChartData,
      options: barChartOptions
    })
}
 </script>

Answer 1

这可以通过将标签作为字符串数组传递来实现，其中每个元素代表一行，例如:

let labels = [
  'A', // normal label.
  ['First line', 'Second line', '...'] // multi-line label.
];

一个工作示例:

new Chart(document.getElementById("chart"), {
  type: 'bar',
  data: {
    labels: ['A', ['Water', 'Heating'], 'C'],
    datasets: [{
      data: [1, 1, 1]
    }]
  }
});

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