laravel - 我希望折线图在图表 js 中从上午 12:00 开始并在晚上 11:59 结束

Question

我希望我的图表从上午 12:00 开始，并且仅在数据可用时绘制点。在我的大多数情况下，数据从早上 6:00 开始。现在我希望图表看起来像这样。

我已经从查询提供的 created_at 生成了标签。因此，标签等同于当前的所有 created_at。我的图表看起来像这样。

我希望我的标签从上午 12:00 开始，但从第一个 created_at 点开始绘制图表。或空值可以替换为 0。

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
    <script>
        let labels = {!! $labels !!};
        Chart.defaults.scale.gridLines.drawOnChartArea = false;
        Chart.defaults.global.title.display = true;
        Chart.defaults.global.tooltips.intersect = false;
        Chart.defaults.global.elements.point.radius = 0;
        Chart.defaults.scale.ticks.maxTicksLimit = 21;
        Chart.defaults.scale.ticks.maxRotation = 0;
        Chart.defaults.scale.ticks.minRotation = 0;
        Chart.defaults.global.defaultFontColor = "#bfbfbf";
        var outdoor = new Chart(document.getElementById("outdoor").getContext('2d'), {
            type: 'line',
            showScale: false,
            data: {
                labels: labels,
                datasets: [{
                    data: {{$activeGraph->pluck('status')}},
                    label: "Active Status",
                    borderColor: "#00F",
                    fill: false,
                    borderWidth: 1,
                }]
            },
            options: {
                title: {
                    text: 'Outdoor Temperature and Due Point'
                },
                customLine: {
                    color: 'black'
                },
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    xAxes: [{
                        ticks: {
                            maxRotation: 0,
                            minRotation: 0
                        }
                    }]
                }
            },
</script>

我的 laravel 代码

 $activeGraph = ActiveGraph::where('device_id', $id)->get();
        $labels = $activeGraph->map(function ($model) {
            return [$model->created_at->format('M-d') ,$model->created_at->format('h:i A')];
        });
        return view('devices.chart',compact('labels','activeGraph'))->with('device', $device);

标签： laravelchart.js