Question

我编辑了现有教程，并尝试制作时间序列图。我想要一个24小时格式的x轴。但是，当我添加xAxes属性时，该图不会显示。

链接： https://jsfiddle.net/cnpante/t54vk1fc/1/

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>{{ title }}</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
  <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js'></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
</head>

<body>


{% block body %}{% endblock %}

</body>
</html>

这是我的xAxes属性。

xAxes: [{
    type: 'time',
    time: {
        format: 'HH:mm',
        unit: 'hour',
        unitStepSize: 1,
        displayFormats: {
            'minute': 'HH:mm',
            'hour': 'HH:mm',
            min: '00:00',
            max: '23:59'
        }
    }
}],

Answer 1

似乎可以在这里正常工作，
请参阅以下工作片段。

似乎小提琴中未包含chart.js库。

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["00:00", "01:25", "06:34", "15:21", "20:01", "22:00"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        responsive: false,
        maintainAspectRatio: false,
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }],
            xAxes: [{
                type: 'time',
                time: {
                    format: 'HH:mm',
                    unit: 'hour',
                    unitStepSize: 1,
                    displayFormats: {
                        'minute': 'HH:mm',
                        'hour': 'HH:mm',
                        min: '00:00',
                        max: '23:59'
                    }
                }
            }],
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myChart" width="600" height="300"></canvas>

添加xAxes时未显示图表JS

1 个答案: