Диаграмма JS несколько суб-меток для метки - PullRequest
0 голосов
/ 21 апреля 2020

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

enter image description here

Ответы [ 2 ]

1 голос
/ 22 апреля 2020

Вам нужно определить дополнительный 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>
0 голосов
/ 28 апреля 2020

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

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

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

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

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

...