Question

我一直在寻找一种用'Chart JS'来排序价值的方法。

我已经创建了a link和another link，但这不是我想要做的。

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

以下是what I've made的屏幕，但您可以看到here （当我'穿越'一种类型的数据时），它揭示了由于对数标度而存在的值不是同一性。但由于价值的类型，我真的需要这种类型的量表。

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

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

谢谢：）

PS：这是我的代码：

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

编辑后1°

感谢#jordanwillis的回复！

好吧我想到类似的东西（http：//i.stack.imgur.com/24yNo.png）（只看一看“Stand 4”堆栈），但你可以看到'红色'酒吧总是排在第4位。但我预计如果它所代表的价值最高，红色杠杆可能位于第一位置。然后为每个堆栈的每个条做到这一点。如果我不够准确，请告诉我你是否希望我做一些“油漆修改”给你一个我期望的确切例子。

（对不起的链接感到抱歉，但我还没有达到10个声望点：/）

如何排序水平堆积条形图JS（具有对数标度）

0 个答案: