Диаграмма JS несколько суб-меток для метки

Question

Я хочу иметь несколько вложенных меток для одной метки в диаграмме. js, возможно ли это?

Answer 1

Вам нужно определить дополнительный yAxis, который не содержит ничего, кроме labels для столбцов с накоплением. Мы добавим свойство yAxisID к каждому набору данных. Это должно соответствовать свойствам шкалы scales.yAxes.id стандартной оси category.

yAxes: [{
      labels: ['A', 'B', 'C', 'A', 'B', 'C', 'A', 'B', 'C']
    },
    {
      id: 'yAxis1',
      type: 'category',
      offset: true,
      gridLines: {
        offsetGridLines: true
      }
    }
  ]

Пожалуйста, посмотрите на исполняемый код ниже.

var barChartData = {
  labels: ["January", "February", "March"],
  datasets: [{
      label: "Dataset 1",
      yAxisID: 'yAxis1',
      backgroundColor: "#FF0000",
      categoryPercentage: 1,
      barPercentage: 0.8,
      stack: "Stack 0",
      data: [1, 2, 3],
    },
    {
      label: "Dataset 2",
      yAxisID: 'yAxis1',
      backgroundColor: "#0000FF",
      categoryPercentage: 1,
      barPercentage: 0.8,
      stack: "Stack 0",
      data: [5, 4, 3],
    },
    {
      label: "Dataset 3",
      yAxisID: 'yAxis1',
      backgroundColor: "#00CC00",
      categoryPercentage: 1,
      barPercentage: 0.8,
      stack: "Stack 1",
      data: [6, 5, 4],
    },
    {
      label: "Dataset 4",
      yAxisID: 'yAxis1',
      backgroundColor: "#000000",
      categoryPercentage: 1,
      barPercentage: 0.8,
      stack: "Stack 2",
      data: [6, 5, 4],
    }
  ]
};

new Chart('chart', {
  type: "horizontalBar",
  data: barChartData,
  options: {
    scales: {
      yAxes: [{
          labels: ['A', 'B', 'C', 'A', 'B', 'C', 'A', 'B', 'C']
        },
        {
          id: 'yAxis1',
          type: 'category',
          offset: true,
          gridLines: {
            offsetGridLines: true
          }
        }
      ]
    },
    title: {
      display: true,
      text: "Chart.js Bar Chart - Stacked",
    },
    tooltips: {
      mode: "index",
      intersect: false,
    },
    responsive: true,
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart"></canvas>

Answer 2

Чтобы это работало с 2D-массивами, что делать?

Допустим, у меня есть такой массив:

High = [[1,2], [4,5]]
Low = [[3,2], [6,5]]

И три группы: A и B.

Теперь мне нужно следующее: