如何在Laravel Chartisan中设置图表标签为垂直格式？

你的现有代码已经通过ChartisanHooks配置了图表的基础属性，要实现垂直标签，只需要在hooks链中添加自定义配置项，指定x轴标签的旋转角度即可——因为Chartisan底层依赖Chart.js，所以可以直接通过options方法传入Chart.js的原生配置参数。

修改后的代码如下：

<script>
    const chart = new Chartisan({
        el: '#chart',
        url: "@chart('sample_chart')",
        hooks: new ChartisanHooks()
            .datasets([{type: 'line', fill: false}, 'bar'])
            .legend()
            .colors()
            .tooltip()
            .title('Sample Chart')
            // 新增配置：设置x轴标签垂直显示
            .options({
                scales: {
                    x: {
                        ticks: {
                            rotation: 90, // 旋转90度实现垂直效果
                            align: 'end' // 可选优化：让标签对齐更美观，避免重叠
                        }
                    }
                }
            }),
    });
</script>
</body>

关键说明： #

• .options()方法用于注入Chart.js的原生配置，这里针对x轴的ticks（刻度标签）设置rotation: 90，即可让标签垂直展示。
• 若出现标签与图表元素重叠的情况，添加align: 'end'可以调整标签的对齐位置，提升视觉效果。

内容的提问来源于stack exchange，提问作者irene_rouh