Диаграмма JS не отображается при добавлении xAxes - PullRequest
Новая
       9

Диаграмма JS не отображается при добавлении xAxes

0 голосов
/ 29 октября 2018

Я отредактировал существующее руководство и постараюсь составить график временных рядов. Я хочу иметь 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'
        }
    }
}],

1 Ответ

0 голосов
/ 30 октября 2018

здесь вроде нормально работает,
см. следующий рабочий фрагмент.

похоже, что библиотека 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...