график. js построение временных рядов - PullRequest
Новая
       7

график. js построение временных рядов

0 голосов
/ 06 апреля 2020

Попытка передать данные из django на веб-страницу для отображения адаптивного графика. Данные передаются в js правильно, но я схожу с ума, пытаясь понять, почему графики. js выдает ошибку.

Я жестко закодировал некоторые данные, например: 

function setLineChart() {
    var ctx = document.getElementById("myLineChart").getContext('2d');
    var dat_1 = {
        label: 'things',
        borderColor: 'blue',
        data: [
            {t: new Date("04/01/2020"), y: 310},
            {t: new Date("04/02/2020"), y: 315},
            {t: new Date("04/03/2020"), y: 320},
            ]
    };
    var myLineChart = new Chart(ctx, {
        type: 'line',
        data: {
            datasets: [dat_1]
        },
        options: {
            scales: {
                xAxes: [{
                    type: 'time',
                    time: {
                        unit: 'day'
                    },
                }],
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
            }]
            }
        }
    })
}

<canvas id="myLineChart" width="600" height="600"></canvas>

И это возвращает Uncaught TypeError: Cannot read property 'skip' of undefined ошибку, которую я не могу отладить. setLineChart() вызывается как часть ответа ajax при обновлении формы. Когда я комментирую секцию options, она отображает диаграмму, но пропускает последнюю точку данных и имеет undefined в качестве маркера оси X.

Любая помощь будет оценена.

1 Ответ

1 голос
/ 07 апреля 2020

Диаграмма. js внутренне использует Момент. js для функциональности оси времени . Поэтому вам следует использовать связанную версию диаграммы. js, которая включает в себя момент. js в одном файле. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>

Это решит вашу проблему в виде следующего исправленного кода фрагмент иллюстрирует. 

var ctx = document.getElementById("myLineChart").getContext('2d');
var dat_1 = {
  label: 'things',
  borderColor: 'blue',
  data: [
    { t: new Date("04/01/2020"), y: 310 },
    { t: new Date("04/02/2020"), y: 315 },
    { t: new Date("04/03/2020"), y: 320 },
  ]
};
var myLineChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [dat_1]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          unit: 'day'
        },
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myLineChart" height="90"></canvas>
...