我一直在寻找一种用'Chart JS'来分类 Value 的方法 .
这是a link和another link我已经成立但这不是我想要做的 .
事实上，通过“排序”值，我的意思是改变Chart JS显示彩色条的方式 . 因为它们总是以相同的颜色顺序显示，这就是我想要改变的 .
这是一个what I've made的屏幕，但是，正如你可以看到here（当我'cross'是一种数据类型）时，它显示由于对数标度而存在的值不是apparents . 但由于 Value 的类型，我真的需要这种类型的秤 .
所以，如果我可以“按升序”更改彩色条的顺序（不知道怎么说......），那么比例将无法隐藏值 .
我希望你们能帮助我，如果你有疑问，我会待在这里 .
谢谢 ：）
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位 . 但我预计如果它所代表的 Value 最高，红色杠杆可能位于第一位置 . 然后为每个堆栈的每个条做到这一点 . 如果我不够准确，如果你想让我做一些“油漆修改”给你一个我期望的确切例子，请告诉我 .
（抱歉链接不好，但我还没有达到10个声望点：/）