Блог

Главная - Вопросы по программированию - Как запустить график с определенного времени и ближайшего часа, а затем отобразить данные на графике с целевой даты и времени в chartjs

Как запустить график с определенного времени и ближайшего часа, а затем отобразить данные на графике с целевой даты и времени в chartjs

#javascript #graph #charts #chart.js #linechart

Вопрос:

Я хочу показать график с помощью диаграммы js , где график начнется с 9 утра и закончится в 10 вечера, данные будут отображаться в определенное время. например, данные поступают с 2 часов дня, поэтому они сделают первые несколько шагов на графике, а затем покажут точку на графике . каждый шаг будет выполняться с интервалом в 30 минут. Но в xAxis весь шаг будет виден с интервалом в 30 минут. см. Пример изображения. Спасибовведите описание изображения здесь

Вот данные выглядят так

 {
    id: 1,
    insertDate: '2021-06-07T05:32:57.0283049 00:00',
    value: 13,
},
{
    id: 2,
    insertDate: '2021-06-07T05:32:57.0283049 00:00',
    value: 15,
}

Ответ №1:

Вы можете использовать минимальное и максимальное значение шкалы, чтобы шкала начиналась и заканчивалась позже:

Пример:

 var data = [{
    "t": 1622287843965,
    "y": "35181.38"
  },
  {
    "t": 1622288064247,
    "y": "35779.44"
  },
  {
    "t": 1622288261196,
    "y": "35681.55"
  },
  {
    "t": 1622288644294,
    "y": "35552.49"
  }
];
var ctx = document.getElementById('chartJSContainer');
const chartInstance = new Chart(ctx, {
  type: "line",
  data: {
    datasets: [{
      label: `Price`,
      data: data,
      backgroundColor: "rgba(134,159,152, 1)",
      borderColor: "rgba(174, 305, 194, 0.4)"
    }],
  },
  options: {
    parsing: {
      yAxisKey: 'y',
      xAxisKey: 't',
    },
    scales: {
      x: {
        display: true,
        type: 'time',
        min: 1622287643465,
        max: 1622288844294
      }
    },

  }
}); 
 <script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.1/dist/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0/dist/chartjs-adapter-moment.min.js"></script>
<canvas id="chartJSContainer" width="600" height="400"></canvas>

Документация: https://www.chartjs.org/docs/master/axes/cartesian/time.html#common-options-to-all-axes

Комментарии:

1. Мой api возвращает данные вот так, как я буду использовать этот формат даты? Мне нужно показать значение и вставить дату [{«id»:»2″,»insertDate»:»2021-06-15T12:31:00″,»value»:»3″,»description»:null,»source»:null},{«id»:»1″,»insertDate»:»2021-06-15T10:31:00″,»value»:»2″,»description»:null,»source»:null}]

Метки: ,