Di Chart.js 3.0, ketika saya memplot grafik dengan sumbu x tipe time, Chart.js menampilkan banyak label yang tidak perlu seperti pada gambar di bawah ini.

Untuk membuat bagan ini, saya menyediakan larik 6 tanggal waktu untuk hari yang sama pada saat yang berbeda dalam sehari: 00:05, 04:11, 12:38, 15, 10, 18:41 dan 22:02. Tapi seperti yang Anda lihat, label tidak mencerminkan data saya: ini menampilkan tanda centang dan label untuk setiap jam antara pukul 2 dan 22.

Apa yang saya dapatkan: masukkan deskripsi gambar di sinimasukkan deskripsi gambar di siniChart.js : hanya menampilkan label pada sumbu x untuk titik data) tetapi sayangnya itu tidak berfungsi dengan sumbu waktu jenis.

Berikut adalah contoh yang dapat direproduksi:

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- import chartjs -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.2.1" crossorigin="anonymous"></script>
    <!-- import luxon for working with datetimes -->
    <script src="https://cdn.jsdelivr.net/npm/luxon@1.26.0" crossorigin="anonymous"></script>
    <!-- import luxon adpater for integration with chartjs -->
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.0.0/dist/chartjs-adapter-luxon.min.js" crossorigin="anonymous"></script>
</head>
<style type="text/css">
.chart {
    width: 600px !important;
    height: 600px !important;
}
</style>

<body>
    <div class="chart"><canvas id="chartjs"></canvas></div>
    <script type="text/javascript">
    var ctx = document.getElementById("chartjs").getContext("2d");

    // Datetimes to display on chart
    let datetimes = [luxon.DateTime.utc(2000, 1, 1, 0, 5), luxon.DateTime.utc(2000, 1, 1, 4, 11), luxon.DateTime.utc(2000, 1, 1, 12, 38), luxon.DateTime.utc(2000, 1, 1, 15, 10), luxon.DateTime.utc(2000, 1, 1, 18, 41), luxon.DateTime.utc(2000, 1, 1, 22, 2)];

    // Create an array of ISO strings
    let datetimes_isos = [];
    datetimes.forEach(function(item, index, array) {
        datetimes_isos.push(item.toISO());
    });

    // Chart's data
    let data = [{ x: datetimes_isos[0], y: 0 }, { x: datetimes_isos[1], y: 10 }, { x: datetimes_isos[2], y: 20 }, { x: datetimes_isos[3], y: 40 }, { x: datetimes_isos[4], y: 50 }, { x: datetimes_isos[5], y: 60 }];

    const chartData = {
        labels: datetimes_isos,
        datasets: [{ data: data }]
    };

    const config = {
        type: 'line',
        data: chartData,
        options: {
            scales: {
                x: {
                    type: 'time',
                },

            },
        },
    };

    var theChart = new Chart(ctx, config);
    </script>
</body>

</html>
1
Rivers 11 Mei 2021, 20:35

1 menjawab

Jawaban Terbaik

Inilah solusinya.

Anda perlu menambahkan sumber kutu ke data.

Dokumentasi referensi di sini

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- import chartjs -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.2.1" crossorigin="anonymous"></script>
    <!-- import luxon for working with datetimes -->
    <script src="https://cdn.jsdelivr.net/npm/luxon@1.26.0" crossorigin="anonymous"></script>
    <!-- import luxon adpater for integration with chartjs -->
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.0.0/dist/chartjs-adapter-luxon.min.js" crossorigin="anonymous"></script>
</head>
<style type="text/css">
.chart {
    width: 600px !important;
    height: 600px !important;
}
</style>

<body>
    <div class="chart"><canvas id="chartjs"></canvas></div>
    <script type="text/javascript">
    var ctx = document.getElementById("chartjs").getContext("2d");

    // Datetimes to display on chart
    let datetimes = [luxon.DateTime.utc(2000, 1, 1, 0, 5), luxon.DateTime.utc(2000, 1, 1, 4, 11), luxon.DateTime.utc(2000, 1, 1, 12, 38), luxon.DateTime.utc(2000, 1, 1, 15, 10), luxon.DateTime.utc(2000, 1, 1, 18, 41), luxon.DateTime.utc(2000, 1, 1, 22, 2)];

    // Create an array of ISO strings
    let datetimes_isos = [];
    datetimes.forEach(function(item, index, array) {
        datetimes_isos.push(item.toISO());
    });

    // Chart's data
    let data = [{ x: datetimes_isos[0], y: 0 }, { x: datetimes_isos[1], y: 10 }, { x: datetimes_isos[2], y: 20 }, { x: datetimes_isos[3], y: 40 }, { x: datetimes_isos[4], y: 50 }, { x: datetimes_isos[5], y: 60 }];

    const chartData = {
        labels: datetimes_isos,
        datasets: [{ data: data }]
    };

    const config = {
        type: 'line',
        data: chartData,
        options: {
             scales: {
              x: {
                  type: 'time',
                  ticks:{
                    source:'data'
                  },
                  time: {
                  unit: "minute"
                  },
              }
          },
        },
    };

    var theChart = new Chart(ctx, config);
    </script>
</body>

</html>
2
Shakti 11 Mei 2021, 22:14