如何在React Chart.js 2中对堆叠柱状图的数据集按降序排序

我在使用React Chart.js 2开发堆叠柱状图时，每个堆叠条中的数据集无法按降序排列，当前显示顺序随机。我怀疑问题出在当前的数据结构上。

现有代码 #

import React from 'react';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';
import { Bar } from 'react-chartjs-2';
import { claimStatues, demoClaimsValue, generateMockData } from './data.mock';
import { stackedBarChartOptions } from './Barchart.options';
ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
);

const xLabels = [
  'In-patient',
  'Out-patient',
  'Dental',
  'Vision',
  'Vaccination',
  'Total permanent disability',
  'Critical illness',
  'Accident',
  'Maternity',
  'Death',
  'Others',
];

const dataPoints = [
  {
    label: 'Received',
    data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
    backgroundColor: '#1F659F',
  },
  {
    label: 'Rejected',
    data: [20, 30, 10, 60, 70, 60, 70, 80, 90, 100],
    backgroundColor: '#F44336',
  },
  {
    label: 'Processing',
    data: [30, 10, 20, 80, 90, 60, 70, 80, 90, 100],
    backgroundColor: '#FFC107',
  },
  {
    label: 'Approved',
    data: [40, 10, 20, 80, 90, 60, 70, 80, 90, 100],
    backgroundColor: '#4CAF50',
  },
  {
    label: 'Custom',
    data: [50, 10, 20, 80, 90, 60, 70, 80, 90, 100],
    backgroundColor: '#00BCD4',
  },
];

export const data = {
  labels: xLabels,
  datasets: dataPoints.map((dataPoint) => ({
    ...dataPoint,
  })),
};

/**
 * 
 * generateMockData({
    columns: demoClaimsValue,
    statues: claimStatues,
  }),
 */
export default function BarChart() {
  return (
    <div className="relative bg-white">
      <Bar options={stackedBarChartOptions} data={data} />
    </div>
  );
}

package.json配置 #

{
  "name": "rws-econcierge-cms",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "dev:prod": "env-cmd -f .env.prod next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "export": "next build && next export",
    "build:prod": "env-cmd -f .env.prod yarn build"
  },
  "dependencies": {
    "@faker-js/faker": "^8.3.1",
    "@fullcalendar/core": "^6.1.9",
    "@fullcalendar/daygrid": "^6.1.9",
    "@fullcalendar/interaction": "^6.1.9",
    "@fullcalendar/react": "^6.1.9",
    "@heroicons/react": "^2.0.18",
    "@hookform/resolvers": "^2.9.8",
    "@tanstack/react-query": "^4.3.9",
    "@tanstack/react-query-devtools": "^4.32.6",
    "antd": "^5.8.0",
    "axios": "^0.27.2",
    "chart.js": "^4.4.1",
    "class-variance-authority": "^0.7.0",
    "classnames": "^2.3.2",
    "date-fns": "^2.29.3",
    "date-fns-tz": "^1.3.7",
    "dayjs": "^1.11.9",
    "dnd-core": "^16.0.1",
    "dompurify": "^3.0.6",
    "draft-js": "^0.11.7",
    "draftjs-to-html": "^0.9.1",
    "env-cmd": "^10.1.0",
    "file-saver": "^2.0.5",
    "immutability-helper": "^3.1.1",
    "jszip": "^3.10.1",
    "next": "12.3.0",
    "qs": "^6.11.0",
    "react": "18.2.0",
    "react-chartjs-2": "^5.2.0",
    "react-dnd": "^16.0.1",
    "react-dnd-html5-backend": "^16.0.1",
    "react-dom": "18.2.0",
    "react-draft-wysiwyg": "^1.15.0",
    "react-hook-form": "^7.35.0",
    "react-quill": "^2.0.0",
    "recoil": "^0.7.5",
    "recoil-persist": "^4.2.0",
    "underscore": "^1.13.6",
    "validator": "^13.11.0",
    "yup": "^1.2.0"
  },
  "devDependencies": {
    "@types/file-saver": "^2.0.6",
    "@types/node": "18.7.18",
    "@types/qs": "^6.9.7",
    "@types/react": "18.0.20",
    "@types/react-dom": "18.0.6",
    "@types/underscore": "^1.11.9",
    "@types/validator": "^13.11.5",
    "autoprefixer": "^10.4.11",
    "eslint": "8.23.1",
    "eslint-config-next": "12.3.0",
    "postcss": "^8.4.16",
    "prettier": "^3.0.2",
    "prettier-plugin-tailwindcss": "^0.5.3",
    "tailwindcss": "^3.1.8",
    "typescript": "4.8.3"
  }
}

需求说明 #

• 将每个堆叠条中的数据集按从高到低排序
• 参考效果：

内容的提问来源于stack exchange，提问作者Myo Thiha Kyaw