Разделение разных меток (с разными данными) в столбчатой ​​диаграмме с накоплением - PullRequest
Новая
       34

Разделение разных меток (с разными данными) в столбчатой ​​диаграмме с накоплением

0 голосов
/ 07 мая 2019

У меня проблемы с особенно персонализированной гистограммой. График, который я планирую запрограммировать, должен показать все мои действия, которые я делал в школе за трехлетний период, поэтому я решил создать три разных ярлыка (1-й, 2-й и 3-й год). После этого я поместил первую группу данных (которые являются 4 различными действиями) в первую метку. Наборы данных (как в примере, поставляемом с Chart.js и на официальном сайте) не задействованы.

Теперь я должен добавить другие действия в оставшиеся годы (метки), но я не могу понять, как. Обратите внимание, что остальные годы будут иметь различное количество мероприятий (например, в 4-м году должно быть 5 мероприятий, а в 5-м - 2). Указание аргумента / параметра стека (в структуре data-datasets) поместит другие гистограммы рядом с первой, но всегда в положение первой метки.

Как я могу разделить эти разные данные в трех разных метках ? Может быть, есть параметр, который мне не хватает? Или есть более блестящий способ?

В общем, я ищу некий индекс индекса массива меток , чтобы отдельно хранить мои наборы данных.

Заранее спасибо. 

let barChart = new Chart(chart, {
    type: 'bar',
    data: {
      labels: ['1st Year', '2nd Year', '3rd Year'],
      datasets: [
        {
          label: '1st Activity',
          data: [90],
          backgroundColor: 'rgba(34, 34, 59, 0.5)',
        },
        {
          label: '2nd Activity',
          data: [17],
          backgroundColor: 'rgba(74, 78, 105, 0.5)',
        },
        {
          label: '3rd Activity',
          data: [8],
          backgroundColor: 'rgba(154, 140, 152, 0.5)',
        },
        {
          label: '4th Activity',
          data: [4],
          backgroundColor: 'rgba(201, 173, 167, 0.5)',
        },

        //other activities included in 4th and 5th Year are going to be coded here
      ]
    },
    options: {
      legend: {
        display: false
      },
      scales: {
        xAxes: [{
          stacked: true
        }],
        yAxes: [{
          ticks: {
            beginAtZero: true,
            max: 140
          },
          stacked: true
        }]
      }
    }
  });
...