Настройка меток оси X для дат ChartJS

У меня есть следующий кусок js:

var canvas_link = document.getElementById("chart1").getContext("2d");

  var myChart = new Chart(canvas_link, {
    
    type: 'bar',
    data: {
      
      labels: xvalues,

      datasets: [{
        label: area_option,
        data: data,
        backgroundColor: 'rgba(255, 99, 132, 1)',
      }]
    },
   

  
  })

Этот фрагмент кода выводит следующий график:[![введите здесь описание изображения][1]][1]

Метки внизу действительно переполнены, и я хотел просто иметь квартальный диапазон по оси x. В настоящее время метки имеют строковый формат. Любые советы будут очень признательны, так как мне трудно понять документацию. Я попытался удалить некоторые значения в массиве для меток, но это просто приводит к неупорядоченным пробелам. Спасибо!

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
1 467
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Существует специальный тип оси — время, и его можно использовать для автоматического масштабирования меток оси X.

Шкала времени используется для отображения времени и даты.

При построении своих тиков он автоматически рассчитает наиболее удобную единицу, исходя из размера шкалы.

Опция labels не нужна, а data следует преобразовать в массив { x: new Date('2020-12-01'), y: 123 }.

const data = [
        { x: new Date('2020-12-01'), y: 123 },
        { x: new Date('2020-12-02'), y: 134 },
        { x: new Date('2020-12-03'), y: 154 },
        // etc.
],

Ось X также должна быть настроена для использования типа time (похоже, она не определяет его автоматически)

var myChart = new Chart(canvas_link, {
    
    type: 'bar',
    data: {
      
      // labels: xvalues, (not needed)

      datasets: [{
        label: area_option,
        data: data, // note: should be new data not the old one
        backgroundColor: 'rgba(255, 99, 132, 1)',
      }]
    },
   
    options: {
        scales: {
            xAxes: [{
                type: 'time',
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'Date'
                },
                ticks: {
                    major: {
                        fontStyle: 'bold',
                        fontColor: '#FF0000'
                    }
                }
            }],
        }
    }
  
  })

Вы можете найти мой код здесь.

ОБНОВЛЕНО: ось X показывает только кварталы/месяцы.

Добавление unit: 'quarter' или unit: 'month' может сгруппировать метки оси X по кварталам или месяцам.

Другие поддерживаемые единицы можно найти в документации.

Обновленную версию можно найти здесь

var myChart = new Chart(canvas_link, {

    type: 'bar',
    data: {
        datasets: [{
            data: data,
            label: 'Data',
            backgroundColor: 'rgba(255, 99, 132, 1)',
        }]
    },

    options: {
        scales: {
            xAxes: [{
                type: 'time',
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'Date'
                },
                time: {
                    unit: 'quarter',
                },
                ticks: {
                    major: {
                        fontStyle: 'bold',
                        fontColor: '#FF0000'
                    }
                }
            }],
        }
    }
})

Это потрясающе!! Спасибо большое, завтра сделаю тест и подтвержу ответ!!! Всем большое спасибо за помощь!!! <3

ritzrori 27.12.2020 03:43

Другие вопросы по теме