Как отсортировать каждый сложенный (перекрывающийся) столбец на графике. js? - PullRequest
Новая
       13

Как отсортировать каждый сложенный (перекрывающийся) столбец на графике. js?

0 голосов
/ 08 февраля 2020

Проблема:

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

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

Я хочу отсортировать содержимое каждого столбца, чтобы меньшие попадают на фронт. Есть ли способ сделать это?

Текущий пример ( jsfiddle ): 

var ctx = document.getElementById('attendances').getContext('2d');
var attendances = new Chart(ctx, {
  // The type of chart we want to create
  type: 'bar',

  // The data for our dataset
  data: {
    labels: ["2018", "2019", "2020"],
    datasets: [
    	{
        "label": "Freddie Fuller",
        "data": [
          15,
          20,
          10
        ]
      },
      {
        "label": "Isabella Green",
        "data": [
          20,
          20,
          5
        ]
      },
      {
        "label": "Sebastian Henderson",
        "data": [
          30,
          10,
          2
        ]
      }
    ]
  },

  options: {
  	plugins: {
    	colorschemes: {
      	scheme: 'tableau.Classic20'
      }
    },
    scales: {
      xAxes: [{
        stacked: true,
        ticks: {
          beginAtZero: true
        }
      }],
      yAxes: [{
        stacked: false,
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-colorschemes@0.4.0/dist/chartjs-plugin-colorschemes.min.js"></script>
<canvas id="attendances" style="width: 100%; height: 300px"></canvas>

Что мне нужно: bar chart

...