Chart.js 带组的堆积条形图中的重复标签-解网

问：

我正在尝试在 Chart.js 中创建带有组的堆积图，但我以重复的标签结束。该图应显示两个不同的集合堆叠（让我们想象一下狗和猫的数量），按年份分组。Y 轴表示数量，X 轴表示月份。

理想情况下，标签应同时是类型和年份，例如：

dogs, , ,cats20222023

我不知道问题是否出在我的数据集上，或者我是否必须操作标签。我尝试使用和根据文档，但没有成功。generateLabelsfilter

需要注意的是，堆栈和组是动态的，因此使用某种硬编码值是行不通的。

这会导致每年可用类型（狗、猫）的重复标签。有关数据和结果，请参阅代码片段：

  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
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.min.js"></script>
<html>
<head></head>
<body>
  <canvas id="chart"></canvas>
</body>
</html>

有没有办法以不同的方式构建数据集以避免重复的标签？如果没有，我该如何利用或？如果可能，可用的标签应为：、、、filtergenerateLabelsdogscats20222023

谢谢！

JavaScript 对象图图表.js

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

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

 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
                }
            }
        }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.min.js"></script>
<html>
<head></head>
<body>
  <canvas id="chart"></canvas>
</body>
</html>

Chart.js 带组的堆积条形图中的重复标签

Duplicated labels in Chart.js Stacked Bar Chart with Groups

评论

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

评论