Диаграмма JS Проблемы с выравниванием отметок верхней и нижней осей - PullRequest
Новая
       23

Диаграмма JS Проблемы с выравниванием отметок верхней и нижней осей

0 голосов
/ 14 апреля 2020

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

Как настроить ось так, чтобы верхние и нижние отметки совпадали?

(Кстати, bgData - это просто массив максимумов в реальном data, сложенном внизу, чтобы продемонстрировать ощущение «процента» на гистограмме.

Спасибо!

Целевая гистограмма

Текущее смещенное тиковое изображение диаграммы тиков

График JS Параметры: 

new Chart(ctx, {
  type: "bar",
  data: {
    datasets: [
      {
        data: this.data,
        barThickness: 12,
        borderWidth: 0,
        backgroundColor: `rgba(${colorBaseRgb}, 1.0)`,
      },
      {
        data: this.bgData,
        barThickness: 12,
        borderWidth: 0,
        backgroundColor: `rgba(${colorOnCardRgb}, 0.1)`,
      },
    ],
  },

  options: {
    scales: {
      xAxes: [
        {
          id: "top-x-axis",
          position: "top",
          type: "category",
          stacked: true,
          labels: this.labelsTop,
          gridLines: {
            // display: false,
            // offsetGridLines: true,
          },
          ticks: {
            fontSize: 12,
            fontFamily: fontFamily,
            fontColor: fontColor,
          },
        },

        {
          id: "bottom-x-axis",
          position: "bottom",
          type: "category",
          stacked: true,
          labels: this.labelsBottom,
          gridLines: {
            // display: false,
            // offsetGridLines: true,
          },
          ticks: {
            fontSize: 12,
            fontFamily: fontFamily,
            fontColor: fontColor,
          },
        },
      ],
      yAxes: [
        {
          stacked: false,
          gridLines: {
            display: false,
          },
          ticks: {
            display: false,
            beginAtZero: true,
          },
        },
      ],
    },

    responsive: false,
    title: {
      display: false,
    },
    display: {
      display: false,
    },
    legend: {
      display: false,
    },
    tooltips: {
      enabled: false,
    },
  },
});

Вот мои тестовые данные 

data = [4, 7, 9, 4, 7, 0, 0, 7, 9, 0, 0, 9];

bgData = [9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9];

labelTop = ["4", "7", "9", "4", "7", "-", "-", "7", "9", "-", "-", "9"];

labelBottom = ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5", "Day 6", "Day 7", "Day 8", "Day 9", "Day 10", "Day 11", "Day 12"];
...