下面是我的div与画布的折线图：
<div
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', () => {
myChart.destroy();
myChart.data.datasets[0].data = this.lineChartData;
myChart.data.labels = this.lineChartLabels;
myChart.update();
})
}
}">
<canvas id="myChart" x-ref="canvas" style="height: 33vh;width: 50vw;"></canvas>
</div>下面是一个值的示例（表示秒）：
[49.66,47.26,46.88,49.81]对于表示日期的x轴：
["04-Feb-17","06-May-17","28-Oct-17","20-Dec-17"]但当它渲染时，显示如下：
有人能告诉我为什么chartjs不能正确显示x-asis以及如何修复它吗？
1条答案
按热度按时间eqoofvh91#
问题是这一行
const labels =${this.lineChartLabels};你正在创建一个脚本，你需要的是数组，所以换句话说：const labels = this.lineChartLabels;删除字符串插值。laravel-livewire和alpine.js，但在我看来，这行代码似乎是罪魁祸首。