я хочу, чтобы линейный график начинался в 12:00 и заканчивался в 23:59 на графике js - PullRequest
2 голосов
/ 07 февраля 2020

Я хочу, чтобы мой график начинался в 12:00 и рисовал точки только при наличии данных. В большинстве случаев мой случай начинается в 6:00 утра. Теперь я хочу, чтобы график выглядел так. enter image description here

Я должен был сгенерировать метку из созданного запроса, созданного запросом. таким образом, метка эквивалентна всем присутствующим созданным_секретариям. Моя диаграмма выглядит следующим образом. enter image description here

Я хочу, чтобы моя метка начиналась в 12:00, а график начинался с первой точки созданной точки. или нулевое значение может быть заменено на 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);
...