Как нарисовать график Chart.js, чтобы по оси X стояли только часы, но данные отображались поминутно?

Имеется API, которое возвращает количество пользователей онлайн в таком формате:

const data = [     ['2022-05-07 13:45:00', 14],     ['2022-05-07 13:47:00', 13],     ['2022-05-07 13:49:00', 12],     ['2022-05-07 13:51:00', 10],     ['2022-05-07 13:53:00', 8],     ['2022-05-07 13:54:00', 18],     ['2022-05-07 16:34:00', 9],     ['2022-05-07 17:15:00', 18] ];

1	const data = [ ['2022-05-07 13:45:00', 14], ['2022-05-07 13:47:00', 13], ['2022-05-07 13:49:00', 12], ['2022-05-07 13:51:00', 10], ['2022-05-07 13:53:00', 8], ['2022-05-07 13:54:00', 18], ['2022-05-07 16:34:00', 9], ['2022-05-07 17:15:00', 18] ];

Хочу отобразить на графике статистику, но мне не надо на оси X писать каждую минуту, хочется чтобы только часы отображались, но при этом сам график отображал изменения не только по часам, но и промежуточные значения. Попробовал следующий код:

var chartData = []; data.forEach(item =&gt; {     var date = new Date(item[0])     chartData.push({         x: date,         y: item[1]     }) }) var ctx = document.getElementById('myChart'); const chart = new Chart(ctx, {     type: 'line',     data: {         datasets: [{             data: chartData         }]     },     options: {         scales: {             x: {                 type: 'time',                 time: {                     unit: 'hour',                     displayFormats: {                         hour: 'hh'                     }                 }             }         }     } });

1

Но при таком коде график растягивается сильно и не влезает на экран, явно что-то не так. Подскажите, как реализовать такой график? Или может использовать вообще другую библиотеку для этого?

Дополнительно:

Содержание

1 Дополнительно:
2 Ответы:

Выложи рабочий пример на jsfiddle посмотрим что не так

Ответы:

Я бы взял ваши даные, закинул в excel, посмотрел бы как могут выглядеть графики потом подгонял, может ваши данные надо сократить и потом только отображать

Данные в sqlite сейчас. Сокращать ничего не надо, нужна подробная статистика

+ Заказать

Для решения данной проблемы вы можете воспользоваться услугами фрилансеров. Мы выполним необходимую работу быстро и качественно.

Есть ответ
09.04.2024

Ответить

Для того чтобы нарисовать график с библиотекой Chart.js, где по оси X будут отображаться только часы, но данные будут отображаться поминутно, мы можем воспользоваться следующим подходом.

Сначала необходимо создать массив данных, где каждый элемент будет содержать время и соответствующее значение. Например, для данных за один час, массив может выглядеть примерно так:

var data = [
  { time: '00:00', value: 10 },
  { time: '00:01', value: 15 },
  { time: '00:02', value: 20 },
  // Добавьте остальные данные
];

1

2

3

4

5

6

var data = [

{ time: '00:00', value: 10 },

{ time: '00:01', value: 15 },

{ time: '00:02', value: 20 },

// Добавьте остальные данные

];

Затем мы можем настроить наш график, указав тип графика (например, 'line'), данные, опции и метки для оси X, чтобы отображать только часы. Пример кода для создания графика:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: data.map(item => item.time),
    datasets: [{
      label: 'My Data',
      data: data.map(item => item.value),
      // Дополнительные настройки для внешнего вида графика
    }]
  },
  options: {
    scales: {
      x: {
        ticks: {
          callback: function(value, index, values) {
            return value.split(':')[0]; // Отображаем только часы
          }
        }
      }
    }
  }
});

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

var ctx = document.getElementById('myChart').getContext('2d');

var myChart = new Chart(ctx, {

type: 'line',

data: {

labels: data.map(item => item.time),

datasets: [{

label: 'My Data',

data: data.map(item => item.value),

// Дополнительные настройки для внешнего вида графика

}]

},

options: {

scales: {

x: {

ticks: {

callback: function(value, index, values) {

return value.split(':')[0]; // Отображаем только часы

}

});

В данном примере мы используем функцию обратного вызова в опциях графика, чтобы отобразить только часы на оси X. Таким образом, мы можем достичь желаемого результата - отображение данных поминутно, но метки по оси X будут представлены только часами.

Надеюсь, данное объяснение поможет вам нарисовать график с библиотекой Chart.js, удовлетворяющий вашим требованиям. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать.

Есть ответ
07.04.2024

Ответить

Для того чтобы нарисовать график с библиотекой Chart.js, где по оси X будут отображаться только часы, а данные будут отображаться поминутно, следует использовать библиотеку Moment.js для работы с датами и временем.

Ниже приведен пример кода на языке PHP, который демонстрирует создание графика с такими требованиями:

    <title>Chart.js Example</title>
    
    


    

    
        var ctx = document.getElementById('myChart').getContext('2d');

        var data = {
            labels: [],
            datasets: [{
                label: 'Data',
                data: [],
                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                borderColor: 'rgba(255, 99, 132, 1)',
                borderWidth: 1
            }]
        };

        var options = {
            scales: {
                x: {
                    type: 'time',
                    time: {
                        unit: 'hour',
                        displayFormats: {
                            hour: 'HH:mm'
                        }
                    }
                }
            }
        };

        var myChart = new Chart(ctx, {
            type: 'line',
            data: data,
            options: options
        });

        var currentTime = moment();
        for (var i = 0; i < 60; i++) {
            data.labels.push(currentTime.format('HH:mm'));
            data.datasets[0].data.push(Math.random() * 100);
            currentTime.add(1, 'minute');
        }

        myChart.update();

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

<title>Chart.js Example</title>

var ctx = document.getElementById('myChart').getContext('2d');

var data = {

labels: [],

datasets: [{

label: 'Data',

data: [],

backgroundColor: 'rgba(255, 99, 132, 0.2)',

borderColor: 'rgba(255, 99, 132, 1)',

borderWidth: 1

}]

};

var options = {

scales: {

x: {

type: 'time',

time: {

unit: 'hour',

displayFormats: {

hour: 'HH:mm'

}

};

var myChart = new Chart(ctx, {

type: 'line',

data: data,

options: options

});

var currentTime = moment();

for (var i = 0; i < 60; i++) {

data.labels.push(currentTime.format('HH:mm'));

data.datasets[0].data.push(Math.random() * 100);

currentTime.add(1, 'minute');

}

myChart.update();

В этом примере мы создаем график с одним набором данных, где по оси X отображаются только часы в формате "HH:mm", а данные отображаются каждую минуту. Мы используем Moment.js для работы с временем и Chart.js для создания графика.

Таким образом, вы можете использовать данный код в своем проекте для создания графика с требуемыми характеристиками.

Как нарисовать график Chart.js, чтобы по оси X стояли только часы, но данные отображались поминутно?

Дополнительно:

Ответы:

Оставить комментарий Отменить

Ответы

Ежедневно, круглосуточно

Как нарисовать график Chart.js, чтобы по оси X стояли только часы, но данные отображались поминутно?

Дополнительно:

Ответы:

Оставить комментарий Отменить

Ответы

Метки

Ежедневно, круглосуточно