1
fillThreeDay() {
  this.datacollection = {
    labels: [
      '17 июня 00:46',
      '17 июня 01:53',
      '17 июня 07:22',
      '17 июня 16:27',
      '17 июня 21:06',
      '18 июня 06:20',
      '18 июня 11:24',
      '18 июня 17:19',
      '18 июня 20:10',
      '18 июня 23:13',
      '19 июня 00:24',
      '19 июня 06:33',
      '19 июня 13:57',
      '19 июня 20:42'
    ],
    datasets: [
      {
        label: '17-19 июня',
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderColor: 'rgba(255, 99, 132, 1)',
        data: [16.4,13.1,8.4,6.5,8.7, 3.8, 12.9, 3.9, 10.0, 8.3, 8.7, 10.4, 8.5, 9.7]
      }
    ]
  }
}

Результат

Но по оси x расстояние между точками делится на равное, а время между этими точками прошло разное. Как реализовать корректную работу с датой и временем?

0

1 ответ 1

2

Плагин vue-chartjs - это обертка для JavaScript библиотеки Chart.js, в которой при инициализации диаграммы в качестве параметра можно указать тип декартовой оси как временная шкала.

Явная проблема в том, что в зависимостях у библиотеки Chart числится moment, для которой нужно использовать даты в подготовленном формате, а не в таком '17 июня 00:46'.

Для этого необходимо:

  • указать локаль moment.locale('ru') до инициализации плагина vue-chartjs;
  • используя хук parser, преобразовать входные данные.

// Отключим ненужные для примера
// сообщения в консоли.
Vue.config.productionTip = false;
Vue.config.devtools = false;

// Задаем локаль для парсинга формата даты
// при инициализации графика.
moment.locale('ru');

// Параметры диаграммы вынесены
// отдельно только демки.
const OPTIONS = {
  // Параметры шкал диаграммы.
  scales: {
    yAxes: [{
      // Линии сетки.
      gridLines: {
        // Отображение линии.
        display: true
      }
    }],
    xAxes: [{
      gridLines: {
        display: true
      },
      // Тип декартовой оси: временная шкала.
      type: 'time',
      // Параметры временной шкалы.
      time: {
        // Формат отображения временной шкалы:
        displayFormats: {
          // почасовая: 'День/Месяц часы:минуты'.
          hour: 'D/MM HH:mm'
        },
        // unit: 'hour',
        // Шаг сетки: каждые шесть часов.
        stepSize: 6,
        // Задаем формат даты для парсинга из русской локали.
        parser: (value) => moment(value, 'DD MMMM HH:mm')
      }
    }]
  },
  // Легенда диаграммы.
  legend: {
    // Отображение легенды.
    display: true
  },
  // Отзывчивость. Растягивание
  // по ширине родительского контейнера.
  responsive: true,
  // Поддерживать соотношение сторон
  // диаграммы при отображении.
  maintainAspectRatio: false
}

Vue.component('line-chart', {
  extends: VueChartJs.Line,
  props: ['chartData'],
  mounted() {
    this.render();
  },
  methods: {
    render() {
      this.renderChart({
        labels: [
          '17 июня 00:46',
          '17 июня 01:53',
          '17 июня 07:22',
          '17 июня 16:27',
          '17 июня 21:06',
          '18 июня 06:20',
          '18 июня 11:24',
          '18 июня 17:19',
          '18 июня 20:10',
          '18 июня 23:13',
          '19 июня 00:24',
          '19 июня 06:33',
          '19 июня 13:57',
          '19 июня 20:42'
        ],
        datasets: [{
          label: '17-19 июня',
          backgroundColor: 'rgba(255, 99, 132, 0.2)',
          data: this.$props.chartData
        }]
      }, OPTIONS)
    }
  }
});

new Vue({
  el: '#app',
  data: {
    collection: [16.4, 13.1, 8.4, 6.5, 8.7, 3.8, 12.9, 3.9, 10.0, 8.3, 8.7, 10.4, 8.5, 9.7]
  }
});
<div id="app">
  <line-chart :chart-data="collection"></line-chart>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-chartjs@2.8.7/dist/vue-chartjs.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/ru.js"></script>


Возможно, что есть и другие варианты решения вопроса. Документация

4
  • А можно как-то убрать привязку данных к label?
    – Spirit04eK
    9 июл 2019 в 5:21
  • Скорее задать кастомные, например, чтобы были подписаны только 0, 3, 6, 8, 11, 13, 16, 18, 21, 23. ( это часы), а данные располагались как и должны располагаться, например необходимо построить точку, которая соответствует времени 3:51
    – Spirit04eK
    9 июл 2019 в 6:38
  • Спасибо большое, вроде начинаю понимать как устроена эта библиотека
    – Spirit04eK
    9 июл 2019 в 7:26
  • @Spirit04eK, добавил парсинг дат из формата, который в вопросе + вроде, учел ваши комментарии.
    – user256824
    15 июл 2019 в 3:03

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.