Chart.js X轴标签显示异常的原因及修复方案咨询

核心问题：X轴标签被错误转为字符串 #

你代码里的const labels = ${this.lineChartLabels};把原本的数组标签转成了字符串——比如原数组["04-Feb-17","06-May-17"]会变成"04-Feb-17,06-May-17"，Chart.js直接把这个整串当成了单个X轴标签，所以才显示成一团乱码的长文本。

修复步骤 #

1. 修正标签赋值逻辑：直接使用原始数组，去掉模板字符串的包裹：

// 替换原有的错误赋值行
const labels = this.lineChartLabels;

2. 修复Livewire更新的错误操作：你在updateTheChart事件里先调用myChart.destroy()，之后再操作myChart对象会报错——因为destroy后实例已失效。正确做法是直接更新数据后调用update()，无需销毁实例：

Livewire.on('updateTheChart', () => {
    myChart.data.datasets[0].data = this.lineChartData;
    myChart.data.labels = this.lineChartLabels;
    myChart.update();
})

完整修正后的x-data代码片段 #

{
    lineChartLabels: @entangle('lineChartLabels'),
    lineChartData: @entangle('lineChartData'),
    init() {
        const labels = this.lineChartLabels; // 修正标签赋值
        const data = {
            labels: labels,
            datasets: [{
                backgroundColor: 'lightblue',
                data: this.lineChartData,
                fill: true,
                label: `{{__('site.report.values')}}`,
            }]
        };
        const config = {
            type: 'line',
            data: data,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                      ticks: {
                        callback: function (value) {
                          const date = new Date(Number(value) * 1000);
                          return date.toISOString().substring(11,23);
                        }
                      }
                    }
                },
                plugins: {
                    tooltip: {
                      callbacks: {
                        label: function (context) {
                          const date = new Date(Number(context.formattedValue) * 1000);
                          return date.toISOString().substring(11,23);
                        }
                      }
                   }
                }
             }
        };
        const myChart = new Chart(
            this.$refs.canvas,
            config
        );
        Livewire.on('updateTheChart', () => {
            // 移除destroy操作，直接更新数据
            myChart.data.datasets[0].data = this.lineChartData;
            myChart.data.labels = this.lineChartLabels;
            myChart.update();
        })
    }
}

额外保障（可选） #

如果担心Livewire传递的数据格式异常，可以加个数组类型校验：

const labels = Array.isArray(this.lineChartLabels) ? this.lineChartLabels : [];

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