在堆叠的条形图中分隔不同的标签(带有不同的数据)

时间:2019-05-07 19:02:57

标签: label chart.js stacked-chart

我在使用特别个性化的堆叠条形图时遇到了一些问题。 我计划编程的图表应显示三年内我在学校所做的所有活动,因此,我决定创建三个不同的标签(第一年,第二年和第三年)。之后,我将第一组数据(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
        }]
      }
    }
  });

0 个答案:

没有答案