Javascript 如何排序水平堆叠条形图JS（带对数刻度）

我一直在寻找一种用“Chart JS”对值进行排序的方法

这是我已经建立的，但这不是我想做的

事实上，通过“排序”值，我的意思是改变图表JS显示彩色条的方式。因为它们总是以相同的颜色顺序显示，这就是我想要改变的

这是一个屏幕，但是，正如你所看到的 （当我“交叉”一类数据时），它揭示了由于对数尺度的原因，数值不明显。但是我真的需要这种类型的量表，因为值的类型

所以，如果我可以改变彩色条“升序”的顺序（不知道怎么说…），那么比例将无法隐藏值

我希望你们能帮我，如果你们有问题我会留在这里

谢谢：）

PS：这是我的代码：

//某处

var响应=[
[“1号看台”、“2号看台”、“3号看台”、“4号看台”、“5号看台]，//nb elements dans les 5 tableaux
["1", "15", "1", "1", "20000"],
["10", "10", "10", "10000", "5"],
["5", "5", "50000", "5", "10"],
["500000", "5", "5", "5", "10"],
];
obj.dom.find（“.widget_content”）.html（“”）//调整la hauteur du控件的大小
obj.showGraph（obj.dom.find（“#graph”），response）；//阿菲查格·杜克·阿维克·多涅斯
//其他地方
this.showGraph=函数（画布，paramDataOccupation）
{
//初始化
//瓦卢尔斯国际酒店
//开始1辆车0=说明des标签
var数据占用=新阵列（nbInfo-1）；
对于（l=1；l

后编辑1°

谢谢jordanwillis的回复

我考虑过类似的情况（http://I.stack.imgur.com/24yNo.png）（只看一下“Stand 4”堆栈），但正如您所看到的，“红色”条始终位于第四位。但我希望红色条可能位于第一位，如果它代表的值最大。然后对每个堆栈中的每个条都这样做。 如果你想让我做一点“油漆修改”，让我知道，如果我不够准确，给你一个我期望的确切例子

---

（很抱歉链接不好，但我还没有达到10个信誉点：/）

你能解释一下你希望你的“划掉的”数据集图片是什么样子吗？我想我不明白你的意思。谢谢你的回复！我通过编辑我的帖子添加了一些信息（不确定是否必须这样做，但我不知道如何在评论中添加图片链接（对不起，我是新来的）所以基本上你希望你的数据集总是被排序，以使最大的值排在第一位，以此类推？例如，在第一行，蓝色将排在第一位，第三行，浅蓝色将排在第一位？是的，这正是我想做的：）好的，让我看看我是否能想出一个解决方案。你能解释一下你想要的“交叉”是什么吗我想我不明白你的意思。谢谢你的回复！我已经通过编辑我的帖子添加了一些信息（不确定是否必须这样做，但我不知道如何在评论中添加图片链接）（对不起，我是新来的）所以基本上你希望你的数据集总是被排序，以使最大的值排在第一位，以此类推？例如，在第一行，蓝色将排在第一位，第三行，浅蓝色将排在第一位？是的，这正是我想要做的：）好的，让我看看我是否能想出一个解决方案。 // Somewhere

var response = [
["Stand 1", "Stand 2","Stand 3", "Stand 4", "Stand 5"],//nb elements dans les 5 tableaux
["1", "15", "1", "1", "20000"],
["10", "10", "10", "10000", "5"],
["5", "5", "50000", "5", "10"],
["500000", "5", "5", "5", "10"],
];
obj.dom.find(".widget_content").html('<canvas id="graph" height="'+obj.hauteur+'"></canvas>');//resize la hauteur du widget
obj.showGraph(obj.dom.find("#graph"), response); // Affichage du graphe avec les données

//Somewhere Else
this.showGraph = function(canvas, paramDataOccupation)
{
// Initialisation
// Convertion des valeurs en int
// commence a 1 car 0 = description des labels
var dataOccupation = new Array(nbInfo-1);
for (l = 1; l < nbInfo ; l++){
dataOccupation[l-1] = new Array(nbServeur);//nouveau tableau dans le tableau
for (m = 0; m < nbServeur ; m++){
var recup = parseInt(paramDataOccupation[l][m]);
dataOccupation[l-1][m] = recup;
}
}

var obj = this;
//! Configuration du graphique
var largeurWidget = this.dom.width();
canvas.width(largeurWidget);

var datasetChart = {
labels: paramDataOccupation[0],//nom dans l'axe Y (Partenaire)
// Les données d'occupation
datasets: [ 
{ //Erreurs
data: dataOccupation[0],
label: "C",
backgroudColor: obj.color1,
stack: 1,
},
{ // Suspendues
data: dataOccupation[1],
label: "D",
backgroundColor: obj.color2,
stack: 1,
},
{ // ATraiter
data: dataOccupation[2],
label: "A",
backgroundColor: obj.color3,
stack: 1,
},
{ // AExploiter
data: dataOccupation[3],
label: "B",
backgroundColor: obj.color4,
stack: 1,
}
],
};

//! Affichage du graphique
var myLineChart = new Chart(canvas, {
name: "Titre",
type: 'horizontalBar',
data: datasetChart,
toolTip: {
shared: true
},
options: {
scales: {
xAxes: [{
type: 'logarithmic',
position: 'bottom',
stacked: true,
ticks: {
min: 1,
autoSkip: false,//affiche toutes les barres intermediaires (facilite la lecture)
callback: function(label) {
//On affiche uniquement les palier de 10exp(n)
//c'est un peu bricole mais je doute qu'il y est plus de 1.000.000.000.000 de remises par Partenaires
var tableau = [1,10,100,1000,10000,100000,1000000,10000000,100000000,10000000000,100000000000,1000000000000];
if(tableau.includes(label)){
if(label == 1)
return '0';//contourne le probleme de log(0) impossible
else
return (new Number(label)).toLocaleString();
}else{
return "";
}
},
maxTicksLimit: 100,//limite du nombre de barres intermediares (cf: autoSkip)
beginAtZero:true,
},
}],//xAxes
yAxes: [{
scaleLabel: {
display: true,
labelString: "Description"
}
}]//yAxes
},
tooltips: {
display: false,
}
},//fin options
showTooltips: false,
onAnimationComplete: function () {

var ctx = this.chart.ctx;
ctx.font = this.scale.font;
ctx.fillStyle = this.scale.textColor
ctx.textAlign = "center";
ctx.textBaseline = "bottom";

this.datasets.forEach(function (dataset) {
dataset.bars.forEach(function (bar) {
ctx.fillText(bar.value, bar.x, bar.y);
});
})
}
});