Chart.js子标签

axkjgtzd  于 2023-04-30  发布在  Chart.js
关注(0)|答案(1)|浏览(198)

我正在尝试这样做:ChartJS multiple sub labels for label
这个老问题使用v2,我现在使用v4,我还希望有一些组比其他组具有更多的子项。下面是一个粗略的代码,接近我想要的:

<canvas id="myChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.min.js"></script>
<script>
    new Chart('myChart', {
        type: "bar",
        data: {
            labels: ["A", "B", "C", "D", "E"],
            datasets: [
                {
                    label: 'Min',
                    data: [7.16, 1, 2.8, 1, 16]
                },
                {
                    label: 'Max',
                    data: [85.86, 29.55, 181.78, 70.54, 89]
                },
                {
                    label: 'Average',
                    data: [29.03, 13.17, 39.13, 40.61, 51.50]
                }
            ]
        },
        options: {
            indexAxis: 'y',
            plugins: {
                legend: {
                    position: 'bottom'
                }
            },
            scales: {
                y: {
                    reverse: true
                },
                customGroups: {
                    labels: ['Group 1', 'Group 2', 'Group 3'],
                    axis: 'y',
                    reverse: true,
                    ticks: {
                        maxRotation: 90,
                        minRotation: 90,
                        major: {
                            enabled: true
                        },
                        align: 'end'
                    }
                }
            }
        }
    });
</script>

我正在寻找的是第1组围绕标签A,第2组围绕标签B,C,D,第3组围绕标签E。组应在这些行中居中。
我对另一个图书馆很开放,但这一个似乎是最好的。

vcirk6k6

vcirk6k61#

显然,当ticks旋转时,ticks.align没有效果。你可以使用ticks.labelOffset。有关详细信息,请参阅图表中所有笛卡尔坐标轴的通用刻度选项。js文档。
请看一下下面修改后的可运行代码,看看它是如何工作的。

new Chart('myChart', {
  type: "bar",
  data: {
    labels: ["A", "B", "C", "D", "E"],
    datasets: [{
        label: 'Min',
        data: [7.16, 1, 2.8, 1, 16]
      },
      {
        label: 'Max',
        data: [85.86, 29.55, 181.78, 70.54, 89]
      },
      {
        label: 'Average',
        data: [29.03, 13.17, 39.13, 40.61, 51.50]
      }
    ]
  },
  options: {
    indexAxis: 'y',
    maintainAspectRatio: false,
    plugins: {
      legend: {
        position: 'bottom'
      }
    },
    scales: {
      y: {
        reverse: true
      },      
      customGroups: {        
        axis: 'y',
        labels: ['Group 1', '', 'Group 2', '', 'Group 3'],
        reverse: true,
        grid: {
          drawOnChartArea: false,
          lineWidth: [1, 1, 0, 0, 1, 1]
        },
        ticks: {                  
          maxRotation: 90,
          minRotation: 90,
          labelOffset: -22
        }
      }
    }
  }
});
div {
  height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js@^4"></script>
<div>
  <canvas id="myChart"></canvas>
</div>

相关问题