Как настроить линейные метки в Time Cartesian Chart js? - PullRequest
Новая
       40

Как настроить линейные метки в Time Cartesian Chart js?

1 голос
/ 09 марта 2020

Мне нужно показывать метки на оси X каждые 2 часа (0 ч, 2 ч, 4 ч ...). Чего мне не хватает? 

<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        //labels: ['0h', '2h', '4h', '6h', '8h', '10h', '12h', '14h', '16h', '18h', '20h', '22h', '0h'],
        datasets: [{
            label: 'AAA1111',
            //xAxisID: 'Hora',
            //yAxisID: 'Velocidade',
            data: [{
              t: new Date("2015-3-15 12:30"),
              y: 12
            },
            {
              t: new Date("2015-3-15 14:40"),
              y: 45
            },
            {
              t: new Date("2015-3-15 17:50"),
              y: 77
            }
            ],
            borderColor: 'rgba(255, 0, 0, 1)',
            borderWidth: 4,
            fill: false,
            lineTension: 0,
            lineJoint: "round",
            spanGaps: true
        }]
    },
    options: {
        scales: {
            xAxes: [{
                type: 'time',
                distribution: 'linear',
                time: {
                    unit: 'hour',
                    //stepSize: 24??
                },
                ticks: {
                    source: 'data'
                }
            }]
        }
    }
});
</script>

График показывает время x скорость.

1 Ответ

0 голосов
/ 09 марта 2020

Два небольших изменения приведут к желаемому результату:

  • установите stepSize: 2 на отображение меток на оси X каждые 2 часа (0 ч, 2 ч, 4 ч ...) '
  • удалить ticks: { source: 'data' } как , чтобы :

    генерировал тики из данных (включая метки из объектов данных {t | x | y}) "

Вот рабочий пример, основанный на опубликованном коде: 

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    //labels: ['0h', '2h', '4h', '6h', '8h', '10h', '12h', '14h', '16h', '18h', '20h', '22h', '0h'],
    datasets: [{
      label: 'AAA1111',
      //xAxisID: 'Hora',
      //yAxisID: 'Velocidade',
      data: [{
          t: new Date("2015-3-15 12:30"),
          y: 12
        },
        {
          t: new Date("2015-3-15 14:40"),
          y: 45
        },
        {
          t: new Date("2015-3-15 17:50"),
          y: 77
        }
      ],
      borderColor: 'rgba(255, 0, 0, 1)',
      borderWidth: 4,
      fill: false,
      lineTension: 0,
      lineJoint: "round",
      spanGaps: true
    }]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'time',
        distribution: 'linear',
        time: {
          unit: 'hour',
          stepSize: 2
        }
      }]
    }
  }
});
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>
...