ChartJS -> X 轴组内条形的自定义排序

Question

ChartJS 社区您好！

我希望有人已经弄清楚如何在 ChartJS 条形图中正确排序集群内的“数据集”。下面是 ChartJS 中的条形图示例，其中包含多个“数据集”，每个数据集都有自己的标签，与图例中的颜色/项目相对应。

这是原始图表的图像。在每个聚类中，受访者 1 始终位于第一位置，受访者 2 位于第二位置，受访者 3 位于第三位置。

Chart.JS Bar 示例 PNG

我想要做的是保留X轴（按“报告周期”排序），同时让每个X轴间隔或组内的数据点按升序或降序排序。

我尝试过的方法：

1. 重构每个数据集中的

   data

   属性以匹配

   object

   结构选项
2. 在dataset数组中的每个

   datasets

   中使用单一数据对象和“

   解析

   ”属性
3. 操作

   datasets

   数组以隔离具有相同

   dataset

    的多个 

   label
对象中的数据点

我在前两次尝试中发现，通过这些方法，与每个“数据集”关联的每个条形的位置将始终遵循其组内

datasets

数组中每个数据集的排序（即 datasetIndex）。 ..

我发现第三次尝试实现了所需的排序，但该操作会导致冗余的图例标签。

这是所需排序的图像（在每个簇中升序）

图表集群已排序

这是“原始”显示数据的样子 图表数据

{
  "datasets": [
    {
      "label": "Respondent 1",
      "data": [
        750,
        null,
        null,
        null
      ],
      "borderRadius": 5,
      "backgroundColor": "#1E81D3",
      "borderColor": "#ccc",
      "spanGaps": true,
      "order": 0
    },
    {
      "label": "Respondent 2",
      "data": [
        null,
        33921,
        100001,
        3999
      ],
      "borderRadius": 5,
      "backgroundColor": "#063F84",
      "borderColor": "#ccc",
      "spanGaps": true,
      "order": 1
    },
    {
      "label": "Respondent 3",
      "data": [
        null,
        419,
        21583,
        488
      ],
      "borderRadius": 5,
      "backgroundColor": "#0D5AB7",
      "borderColor": "#ccc",
      "spanGaps": true,
      "order": 2
    }
  ],
  "labels": [
    "2017 Fiscal Year (Jul-Jun) - H2",
    "2022 Fiscal Year (Jan-Dec) - H2",
    "2023 Fiscal Year (Jan-Dec) - H1",
    "2023 Fiscal Year (Jan-Dec) - H2"
  ],
  "yAxisLabel": "Cubic Meters"
}

这是采用后的数据（上面概述的第三次尝试）

{
  "datasets": [
    {
      "label": "Respondent 1",
      "data": [
        750,
        null,
        null,
        null
      ],
      "backgroundColor": "#1E81D3",
      "borderColor": "#ccc",
      "borderRadius": 5
    },
    {
      "label": "Respondent 3",
      "data": [
        null,
        419,
        null,
        null
      ],
      "backgroundColor": "#0D5AB7",
      "borderColor": "#ccc",
      "borderRadius": 5
    },
    {
      "label": "Respondent 2",
      "data": [
        null,
        33921,
        null,
        null
      ],
      "backgroundColor": "#063F84",
      "borderColor": "#ccc",
      "borderRadius": 5
    },
    {
      "label": "Respondent 3",
      "data": [
        null,
        null,
        21583,
        null
      ],
      "backgroundColor": "#0D5AB7",
      "borderColor": "#ccc",
      "borderRadius": 5
    },
    {
      "label": "Respondent 2",
      "data": [
        null,
        null,
        100001,
        null
      ],
      "backgroundColor": "#063F84",
      "borderColor": "#ccc",
      "borderRadius": 5
    },
    {
      "label": "Respondent 3",
      "data": [
        null,
        null,
        null,
        488
      ],
      "backgroundColor": "#0D5AB7",
      "borderColor": "#ccc",
      "borderRadius": 5
    },
    {
      "label": "Respondent 2",
      "data": [
        null,
        null,
        null,
        3999
      ],
      "backgroundColor": "#063F84",
      "borderColor": "#ccc",
      "borderRadius": 5
    }
  ],
  "labels": [
    "2017 Fiscal Year (Jul-Jun) - H2",
    "2022 Fiscal Year (Jan-Dec) - H2",
    "2023 Fiscal Year (Jan-Dec) - H1",
    "2023 Fiscal Year (Jan-Dec) - H2"
  ],
  "yAxisLabel": "Cubic Meters"
}

毕竟，我想一定有更好的方法......

Answer 1

我进行了一些小研究，如果您希望对这些集群的每年部分的数据条进行排序，您需要预先定义数据集并按如下方式排序：

 const chartData = {
  datasets: [
    {
      label: "Respondent 1",
      data: [750, 700, null, null],
      backgroundColor: "#1E81D3",
      borderColor: "#ccc",
      borderRadius: 5
    },
    {
      label: "Respondent 3",
      data: [null, 419, null, null],
      backgroundColor: "#0D5AB7",
      borderColor: "#ccc",
      borderRadius: 5
    },
    {
      label: "Respondent 2",
      data: [null, 33921, null, null],
      backgroundColor: "#063F84",
      borderColor: "#ccc",
      borderRadius: 5
    },
    {
      label: "Respondent 3",
      data: [null, null, 21583, null],
      backgroundColor: "#0D5AB7",
      borderColor: "#ccc",
      borderRadius: 5
    },
    {
      label: "Respondent 2",
      data: [null, null, 20001, null],
      backgroundColor: "#063F84",
      borderColor: "#ccc",
      borderRadius: 5
    },
    {
      label: "Respondent 3",
      data: [null, null, null, 488],
      backgroundColor: "#0D5AB7",
      borderColor: "#ccc",
      borderRadius: 5
    },
    {
      label: "Respondent 2",
      data: [null, null, null, 3999],
      backgroundColor: "#063F84",
      borderColor: "#ccc",
      borderRadius: 5
    }
  ],
  labels: [
    "2017 Fiscal Year (Jul-Jun) - H2",
    "2022 Fiscal Year (Jan-Dec) - H2",
    "2023 Fiscal Year (Jan-Dec) - H1",
    "2023 Fiscal Year (Jan-Dec) - H2"
  ],
  yAxisLabel: "Cubic Meters"
};

// Sort datasets based on the sum of their `data` values
chartData.datasets.sort((a, b) => {
  const sumA = a.data.reduce((sum, val) => sum + (val || 0), 0); // Calculate sum of dataset A
  const sumB = b.data.reduce((sum, val) => sum + (val || 0), 0); // Calculate sum of dataset B
  return sumB - sumA; // Sort in descending order
});

如果我正确理解你的问题，这可能是解决方案，如果不是，请澄清答案有什么问题。