Chart.js中的重复标签Stacked Bar Chart with Groups

j7dteeu8 于 2023-11-18 发布在 Chart.js

关注(0)|答案(1)|浏览(175)

我试图在Chart.js中创建一个带有组的堆叠图，但我以重复的标签结束。该图应该显示两个不同的堆叠集（让我们想象一下狗和猫的数量），按年份分组。Y轴代表数量，X轴代表月份。
理想情况下，标签应该是类型和年份，比如：
dogs、cats、2022、2023
我不知道是我的数据集出了问题，还是我必须操作标签。我试过根据documentation使用generateLabels和filter，但没有成功。
重要的是要注意堆栈和组是动态的，因此具有某种硬编码值将不起作用。
这会导致每年的类型（狗、猫）标签重复。有关数据和结果，请参见代码片段：

const data = {
    "labels": [
      "January",
      "February",
      "March"
    ],
    "datasets": [{
        "label": "dogs",
        "data": [
          12,
          6,
          2
        ],
        "stack": "2022"
      },
      {
        "label": "dogs",
        "data": [
          2,
          20,
          5
        ],
        "stack": "2023"
      },
      {
        "label": "cats",
        "data": [
          2,
          5,
          7
        ],
        "stack": "2023"
      }
    ]
  }
  const config = {
    type: 'bar',
    data: data,
    options: {
      responsive: true,
      interaction: {
        intersect: false,
      },
      scales: {
        x: {
          stacked: true,
        },
        y: {
          stacked: true,
        }
      }
    }
  };
  
  new Chart(
    document.getElementById('chart'),
  config
);

个字符
是否有方法以不同的方式构建数据集以避免重复标签？如果没有，我如何利用filter或generateLabels？如果可能，可用的标签应该是：dogs，cats，2022，2023
谢谢你，谢谢

chart.js

来源：https://stackoverflow.com/questions/77464494/duplicated-labels-in-chart-js-stacked-bar-chart-with-groups

1条答案

按热度按时间

7lrncoxx1#

是的，有一个解决方案，你可以尝试它希望它有帮助。

确保图表中的每个数据集代表一个堆栈（例如，狗或猫）。每个数据集需要每个月的数据，并且您应该相应地标记它们。您需要配置xAxis以堆叠条形图，并根据您的数量缩放配置yAxis。

var ctx = document.getElementById('chart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [{
                label: 'Dogs 2020',
                data: [12, 19, 3, 5, 2, 3, 9],
                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                stack: 'Stack 0'
            }, {
                label: 'Cats 2020',
                data: [7, 11, 5, 8, 3, 7, 6],
                backgroundColor: 'rgba(54, 162, 235, 0.2)',
                stack: 'Stack 0'
            }, {
                label: 'Dogs 2021',
                data: [14, 16, 7, 3, 6, 4, 10],
                backgroundColor: 'rgba(255, 206, 86, 0.2)',
                stack: 'Stack 1'
            }, {
                label: 'Cats 2021',
                data: [8, 9, 6, 4, 5, 11, 8],
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                stack: 'Stack 1'
            }]
        },
        options: {
            scales: {
                x: {
                    stacked: true,
                },
                y: {
                    stacked: true
                }
            }
        }
    });

个字符

赞(0）回复(0）举报 2023-11-18

我来回答

Chart.js中的重复标签Stacked Bar Chart with Groups

1条答案

是的，有一个解决方案，你可以尝试它希望它有帮助。

相关问题

热门标签

最新问答