如何在Chart.js中实现柱状图柱子数值按降序排列

Chart.js本身没有内置的柱形自动排序能力，你最初的合并键值对排序的思路是最优解，具体实现如下：

核心实现逻辑 #

• 将公司名称数组和对应数值数组按索引合并为对象数组
• 对对象数组按数值属性做降序排序
• 排序完成后再拆分回单独的名称数组、数值数组传入图表即可

代码修改步骤 #

你只需要修改apiData函数的逻辑即可，修改后的代码如下：

const apiData = (data) => {
    var topGainersNames = []
    var topLosersNames = []
    var topGainersChange = []
    var topLosersChange = []
    for (var i = 0; i < data.gainers.length; i++) {
        topGainersNames.push(data.gainers[i].stock_symbol)
        topLosersNames.push(data.losers[i].stock_symbol)
        topGainersChange.push(Number(data.gainers[i].stock_change)) // 统一转数字避免排序异常
        topLosersChange.push(Number(data.losers[i].stock_change))
    }

    // 处理上涨标的降序排序
    const mergedGainers = topGainersNames.map((name, index) => ({
        name,
        value: topGainersChange[index]
    }))
    mergedGainers.sort((a, b) => b.value - a.value) // 数值从大到小降序
    // 拆分回两个数组
    const sortedGainersNames = mergedGainers.map(item => item.name)
    const sortedGainersChange = mergedGainers.map(item => item.value)

    // 处理下跌标的排序（默认按跌幅从大到小排，即数值从小到大）
    const mergedLosers = topLosersNames.map((name, index) => ({
        name,
        value: topLosersChange[index]
    }))
    mergedLosers.sort((a, b) => a.value - b.value) 
    // 拆分回两个数组
    const sortedLosersNames = mergedLosers.map(item => item.name)
    const sortedLosersChange = mergedLosers.map(item => item.value)

    var ctx = document.getElementById('topContributor').getContext('2d');
    var myChart = new Chart(ctx, {
        // 传入排序后的数组即可
        data: createChart(sortedGainersNames, sortedGainersChange, sortedLosersNames, sortedLosersChange),
        options: chartStyling()
    })
}

如果需要调整下跌标的的排序规则，比如按跌幅绝对值从大到小，就把下跌的排序逻辑改成mergedLosers.sort((a, b) => Math.abs(b.value) - Math.abs(a.value))即可。

内容的提问来源于stack exchange，提问作者F Nasir