Почему Chart.js (тип: время) отображает неправильные метки - PullRequest
Новая
       15

Почему Chart.js (тип: время) отображает неправильные метки

1 голос
/ 11 июня 2019

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

Я использую ng2-диаграммы с типом времени в Angular 7. На представленном графике у меня есть статистика доменов с периодом 3 месяца. Я проверяю наборы данных и его действительно присутствуют 3 периода, никаких ошибок На графике я вижу, что метка первого месяца не представлена, но с этой диаграммой добавьте метку сентября, которой нет в наборе данных. Данные точки показывают, только метка не представлена. Диаграмма Когда я пытаюсь установить минимум оси X точно так же, как график первого месяца показывает его метку, но диаграмма начинает рисовать не с оси X "Ноль". Я думаю, что мои встроенные функции делают некоторые ошибки, но когда я выключаю все это в опциях, проблема все еще существует. Диаграмма с минимальной осью X

Опции (я отключаю свои функции) 

let chartOptions = {
      type: 'line',
      options: {
        customBlock: {
          normalizeNumbers: Formatter.normalizeNumber,
          monthsLocale: this.months,
          groupMetric: this.groupMetric,
          measureUnits: this.measureUnits,
          tooltip: this.toolTip
        },
        responsive: true,
        maintainAspectRatio: false,
        legend: {
          display: true,
          position: 'bottom',
          labels: {
            usePointStyle: true,
            fontFamily: "'Roboto', Arial, sans-serif",
            fontStyle: "bold",
            fontColor: 'white',
            boxWidth: 8,
            padding: 20,
            // generateLabels: this.generateLegendLabels,

          },
        },
        scales: {
          yAxes: [{
            id: 'Groups',
            type: 'linear',
            position: 'left',
            // scaleLabel: this.leftLabelOptions,
            ticks: {
              min: 0,
              padding: 10,
              fontColor: 'white',
              fontSize: 10,
              // callback: this.generateDataYTicks
            },
            gridLines: {
              color: '#3C2D4C',
              borderDash: [5, 5],
              drawTicks: false
            }
          }, {
            id: 'Infopole',
            type: 'linear',
            position: 'right',
            // scaleLabel: this.rightLabelOptions,
            gridLines: {
              color: '#3C2D4C',
              display: false,
              drawBorder: true,
            },
            ticks: {
              min: 0,
              fontColor: 'white',
              fontSize: 10,
              // callback: this.generateInfopoleYTicks
            }
          }],
          xAxes: [
            {
              display: true,
              mirror: true,
              type: 'time',
              time: {
                unit: 'month',
                source: 'data'
              },
              distribution: 'series',
              ticks: {
                fontColor: 'white',
                fontSize: 10,
                // callback: this.generateXTicks
              }
            }
          ]
        },
        layout: {
          padding: {
            left: 0,
            right: 0,
            top: 0,
            bottom: 0
          }
        },
        tooltips: {
          enabled: false,
          // custom: this.generateTooltip
        }
      }
    };

    return chartOptions;

  }

Я добавляю данные в следующем формате 

dataset = {
  label: "string",
  data: [
    {x: new Date(timestamp), y: number}, ...
  ]
}
...