如何使用React Chart.js为每个堆叠条形图排序数据集2

g2ieeal7 于 2024-01-07 发布在 Chart.js

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

我目前无法按降序对每个堆叠条形图中显示的数据集进行排序;它们目前是随机显示的。

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

字符串
这里是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"
  }
}

型

我注意到这些问题可能与我目前使用的数据结构有关

下面是屏幕简短的参考
x1c 0d1x的数据

希望为每个堆叠的条形图从高到低对数据集进行排序

chart.js

来源：https://stackoverflow.com/questions/77704541/how-to-sort-datasets-for-each-stacked-bar-chart-using-react-chart-js-2

1条答案

按热度按时间

ssgvzors1#

条形图永远不会随机显示;您附加的图像显示每个堆栈都以相同的顺序显示条形图，即您定义数据集数组的顺序：底部为“已接收”，然后是“已批准”，...，顶部为“已拒绝”（显然，如果相应的值太小或为零，则某些条形图不可见）。
颜色在堆栈中以相同的顺序相互跟随;这也是图例中项目的顺序。这是堆叠条形图的预期行为;用户也期望这样，并且可以轻松阅读这样的图表。您不能通过数据Map来更改此顺序。
如果你想改变条形图的顺序，按照它们的值对它们进行排序，你可以使用floating bars;你必须禁用scales.y.stacked选项（默认值是false），并为每个项目指定数组中的两个数字：它的底部和顶部。
这里有一个例子，你的文章中的数据是sort。

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

const dataPoints = [
     {
          label: 'Received',
          data: [20, 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, 120],
          backgroundColor: '#4CAF50',
     },
     {
          label: 'Custom',
          data: [50, 10, 20, 80, 90, 60, 70, 80, 90, 100],
          backgroundColor: '#00BCD4',
     },
];

const datasets = dataPoints.map((dataPoint) => ({
     ...dataPoint,
})); // if they need to be copied

datasets[0].data.forEach((_, datasetIndex)=>{ // all .data arrays should have equal length for this to work
     const all_i = datasets.map((d, dataIndex)=>[d.data[datasetIndex], dataIndex])
          .sort(([data1], [data2]) => data1 - data2);
     let sum = 0;
     all_i.forEach(
          ([data, datasetIdx]) => {
               datasets[datasetIdx].data[datasetIndex] = [sum, sum + data];
               sum = sum + data;
          }
     );
});

const data = {
     labels: xLabels,
     datasets,
};

const config = {
     type: 'bar',
     data: data,
     options: {
          responsive: true,
          scales:{
               x: {
                    stacked: true,
               },
               // y:{
               //    stacked: true
               // }
          },
     },
};

new Chart(document.querySelector('#chart1'), config);

个字符

赞(0）回复(0）举报 2024-01-07

我来回答

如何使用React Chart.js为每个堆叠条形图排序数据集2

1条答案

相关问题

热门标签

最新问答