Home / Questions / 304223
Accepted
John Doe
Asked: 2020-10-29 09:17:07 +0800 CST 2020-10-29 09:17:07 +0800 CST

如何使用 Chart.js 从最高值到最低值堆叠条形图排序？

  • 772

我有一个使用Chart.js库构建的堆积条形图，JavaScript我希望它的排序如下：条形顶部具有最高值的元素，条形底部具有最低值的元素.bottom，即降序排列。

我想它可以使用一些插件来完成Chart.js，但我仍然无法弄清楚。

以下是我正在生成的图表，它是乱序生成的：

以下是我用来构建图表的代码片段：

myNewChart = new Chart(ctx, {
    type: 'horizontalBar',           
    data: { labels, datasets },
    options: {
        maintainAspectRatio: false,
        showAllTooltips: true,
        scales: {
            xAxes: [
                {
                    stacked: true,
                    display: true,
                    ticks: {
                        beginAtZero: true,
                    }
                }
            ],
            yAxes: [
                {
                    stacked: true,
                    display: true,    
                    reverse: false,
                    ticks: { }
                }
            ]
        },
        legend: {
            position: 'bottom',
            padding: 5,
            labels: {
                pointStyle: 'circle',
                usePointStyle: true
            }
        },
        plugins: {
            datalabels: {
                color: "#333333",
                font: {
                    weight: 'bold',
                    size: 16,                          
                }
            }
        },
    },
});

版本： Chart.js v2.8.0

更新：

我添加对象datasets和datasetsObject

const datasetsObject = data.DashboardTicketList.reduce((obj, item) => {
    obj[item.TicketsClasificationType] = obj[item.TicketsClasificationType] || {};
    obj[item.TicketsClasificationType][item.TicketsAsignedTo] = item.TicketsCount;
    return obj;
}, {});

const datasets = Object.keys(datasetsObject).map((name) => ({
    label: name,
    backgroundColor: colors[name],
    data: labels.map((l) => datasetsObject[name][l])
}));

更新 2：

的价值观datasets

const colors = {
    "ABIERTO": "#F76363",
    "ASIGNADO": "#F7A65C",
    "EN PROCESO": "#F2CB5F",
    "EN ESPERA USUARIO": "#B283ED",
    "TERMINADO": "#4285f4",
    "CERRADO": "#6CE5CE",                
};

更新 3：

执行sort其中一个答案中指示的排序算法时，它不再代表图中的任何数据

const datasets = Object.keys(datasetsObject).map((name) => ({
    label: name,
    backgroundColor: colors[name],
    data: labels.map((l) => datasetsObject[name][l]).sort
}));

在此处输入图像描述

javascript

3 Answers

  1. Best Answer

    我看到你正在使用我给你一段时间的逻辑来生成datasetsand labels。好吧，使用我当时给你的相同片段，我将改变它以将它们labels从最高到最低排序，同时考虑到它们的值的总和。为此，其中一个解决方案是，不是以以前的方式生成它们，而是可以用总数生成一个对象，用所述对象label创建一个，从最高到最低组织它，然后从中提取它们，因此它们将考虑到其所有值的总和，从最高到最低排序。我将逐步解释它：arrayarraylabelsarray

    给定以下array查询：

    const consulta = [
    {TicketsCount: 1, TicketsAsignedTo: "A", TicketsClasificationType: "Dataset 1"},
    {TicketsCount: 1, TicketsAsignedTo: "B", TicketsClasificationType: "Dataset 1"},
    {TicketsCount: 3, TicketsAsignedTo: "C", TicketsClasificationType: "Dataset 2"},
    {TicketsCount: 1, TicketsAsignedTo: "D", TicketsClasificationType: "Dataset 1"},
    {TicketsCount: 2, TicketsAsignedTo: "A", TicketsClasificationType: "Dataset 2"},
    {TicketsCount: 1, TicketsAsignedTo: "B", TicketsClasificationType: "Dataset 2"},
    {TicketsCount: 2, TicketsAsignedTo: "D", TicketsClasificationType: "Dataset 2"},
    {TicketsCount: 1, TicketsAsignedTo: "A", TicketsClasificationType: "Dataset 3"},
    {TicketsCount: 2, TicketsAsignedTo: "D", TicketsClasificationType: "Dataset 4"},
    {TicketsCount: 6, TicketsAsignedTo: "E", TicketsClasificationType: "Dataset 5"}
];

    1 - 通过以下方式创建总计对象label：

    const totales = consulta.reduce((obj, row) => {
    obj[row.TicketsAsignedTo] = obj[row.TicketsAsignedTo] || 0;
    obj[row.TicketsAsignedTo] += row.TicketsCount;
    return obj;
}, {});

    上面将返回一个对象，如下所示：

    {A: 4, B: 2, C: 3, D: 5, E: 6}

    labels2 - 创建一个包含y 个总数的数组：

    const labelsArray = Object.keys(totales).map(prop => ({
    label: prop,
    value: totales[prop]
}));

    这将返回array如下所示：

    [
    {label: "A", value: 4},
    {label: "B", value: 2},
    {label: "C", value: 3},
    {label: "D", value: 5},
    {label: "E", value: 6}  
]

    3 -array考虑到财产，从高到低排序value：

    labelsArray.sort((a, b) => b.value - a.value);

    它将array按如下方式返回命令：

    [
    {label: "E", value: 6},
    {label: "D", value: 5},
    {label: "A", value: 4},
    {label: "C", value: 3},
    {label: "B", value: 2}
]

    labels4 -从array订购中提取那些：

    const labels = labelsArray.map(l => l.label);

    它将返回什么：

    ["E", "D", "A", "C", "B"]

    5 - 使用它array来labels生成图表：

    const consulta = [
    {TicketsCount: 1, TicketsAsignedTo: "A", TicketsClasificationType: "Dataset 1"},
    {TicketsCount: 1, TicketsAsignedTo: "B", TicketsClasificationType: "Dataset 1"},
    {TicketsCount: 3, TicketsAsignedTo: "C", TicketsClasificationType: "Dataset 2"},
    {TicketsCount: 1, TicketsAsignedTo: "D", TicketsClasificationType: "Dataset 1"},
    {TicketsCount: 2, TicketsAsignedTo: "A", TicketsClasificationType: "Dataset 2"},
    {TicketsCount: 1, TicketsAsignedTo: "B", TicketsClasificationType: "Dataset 2"},
    {TicketsCount: 2, TicketsAsignedTo: "D", TicketsClasificationType: "Dataset 2"},
    {TicketsCount: 1, TicketsAsignedTo: "A", TicketsClasificationType: "Dataset 3"},
    {TicketsCount: 2, TicketsAsignedTo: "D", TicketsClasificationType: "Dataset 4"},
    {TicketsCount: 6, TicketsAsignedTo: "E", TicketsClasificationType: "Dataset 5"}
];

const colors = {
    "Dataset 1": "#f7a65c",
    "Dataset 2": "#6ce5ce",
    "Dataset 3": "#f2cb5f",
    "Dataset 4": "#b283ed",
    "Dataset 5": "#f76363"
};

const datasetsObject = consulta.reduce((obj, item) => {
    obj[item.TicketsClasificationType] = obj[item.TicketsClasificationType] || {};
    obj[item.TicketsClasificationType][item.TicketsAsignedTo] = item.TicketsCount;
    return obj;
}, {});

// Generar un objeto con los totales
const totales = consulta.reduce((obj, row) => {
  obj[row.TicketsAsignedTo] = obj[row.TicketsAsignedTo] || 0;
  obj[row.TicketsAsignedTo] += row.TicketsCount;
  return obj;
}, {});

// Crear un array de labels y totales
const labelsArray = Object.keys(totales).map(prop => ({
  label: prop,
  value: totales[prop]
}));

// Organizar los labels teniendo en cuenta su total
labelsArray.sort((a, b) => b.value - a.value);

// Extraer los labels
const labels = labelsArray.map(l => l.label);

const datasets = Object.keys(datasetsObject).map(name => ({
    label: name,
    backgroundColor: colors[name],
    data: labels.map(l => datasetsObject[name][l] || 0)
}));

const context = document.getElementById("barChart").getContext("2d");
const myBarChart = new Chart(context, {
    type: "horizontalBar",
    data: { labels, datasets },
    options: {
        scales: {
            xAxes: [{ stacked: true }],
            yAxes: [{ stacked: true }]
        }
    }
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.bundle.min.js"></script>

<canvas id="barChart"></canvas>

    • 3

  2. 排序算法
    排序算法：在java脚本数组中实现，允许你自动组织值。

    示例：
    在这种情况下，我们的变量是： 

    let GroupValores = [[2,5,3],[2,1],[10,3,6,2]];
    • GroupValores按数据量从小到大排列图表：
    GroupValores = GroupValores.sort((a,b) => a.length> b.length);

    A：[[2,1],[2,5,3],[10,3,6,2]]

    • 为 的每个值从最小到最大排列图形GroupValores： 
    GroupValores = GroupValores.map(val => val.sort((a,b) => a > b) );

    A： [[2,3,5],[1,2],[2,3,6,10]]

    现在您只需将它们组合或投资于您想要的东西

    • 0

  3. 在构建数据集的地方，您必须使用 Javascript 数组的 Sort() 函数对每个值进行排序

    const datasets = Object.keys(datasetsObject).map((name) => ({
                label: name,
                backgroundColor: colors[name],
                data: labels.map((l) => datasetsObject[name][l]).Sort()
            }));

    这样，数组的值data应该从小到大排序

    • 0