График. js - Временная шкала - PullRequest
Новая
       10

График. js - Временная шкала

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

Я пытаюсь отобразить даты на xAxes с диаграммой. js

Я пробовал это с 2 датами, но ничего не показывает. Возможно, что-то не так с метками или форматом даты. 

<canvas id="graph"></canvas>

<script>
    var ctx = document.getElementById('graph').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ["2013-02-08", "2013-02-10"],
            datasets: [{
                label: "Something",
                data: [{
                    x: "2013-02-08",
                    y: 1
                }, {
                    x: "2013-02-10",
                    y: 10
                }]
            }]
        },
        options: {
            scales: {
                xAxes: [{
                    type: 'time',
                    time: {
                        unit: 'day'
                    }
                }]
            }
        }
    });
</script>

Нужна помощь:)

1 Ответ

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

Ваш код выглядит нормально, за исключением того, что вам не нужно определять data.labels, поскольку data в вашем наборе данных определяется как отдельные точки через объекты, содержащие свойства x и y.

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

var ctx = document.getElementById('graph').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      label: "Something",
      data: [
        { x: "2013-02-08", y: 1 }, 
        { x: "2013-02-10", y: 10 }
      ]
    }]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          unit: 'day'
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="graph"></canvas>
...