Ordine di assi categorici in plotly.js

Question

Ho un grafico a barre plotly.js che sto cercando di ottenere l'ordine dell'asse categoriale a destra. Ogni categoria ha una singola barra, ma a volte sono verdi e talvolta sono gialli. Le barre dovrebbero essere in ordine dal più alto al più basso, ma sembra che la trama sia ordinata in base ai diversi riempimenti.

I dati:

var data = [ 
    { 
    "marker": { 
     "color": "#006666" 
    }, 
    "x": ["A:0122", "A:0121", "A:0434", "A:0838", "A:0083", "A:0081", "A:0687"], 
    "y": [1246.0, 1096.0, 1000.0, 200.0, 0.0, 0.0, 0.0], 
    "name": "Green", 
    "type": "bar" 
    }, 
    { 
    "marker": { 
     "color": "#C87B31" 
    }, 
    "x": ["A:0169", "A:0175"], 
    "y": [270.0, 0.0], 
    "name": "Yellow", 
    "type": "bar" 
    } 
]; 

Il layout:

var layout = { 
    "margin": { 
     "t": 0 
    }, 
    "barmode": "stack", 
    "tickangle": -90, 
    "showlegend": true, 
    "xaxis": { 
     "title": "Idea", 
     "tickmode": "array", 
     "tickvals": ["A:0122", "A:0121", "A:0434", "A:0169", "A:0838", "A:0083", "A:0175", "A:0081", "A:0687"] 
    }, 
    "yaxis": { 
     "title": "Result" 
    } 
}; 

Altro configuation:

{"showLink":false, "displaylogo":false} 

Ma ecco il risultato:

Si noti che "A: 0169" dovrebbe essere la quarta barra, ma invece è l'ultima.

Come si ottengono le barre nell'ordine specificato in tickvals? O posso specificare il loro ordine in un modo diverso?

Answer 1

È possibile impostare x e tickvals ad un array ordinato quindi aggiungere le etichette asseX con ticktext cioè dati:

[{ 
    "marker": {"color": "#006666"}, 
    "x": [0, 1, 2, 4, 5, 7, 8], 
    "y": [1246.0, 1096.0, 1000.0, 200.0, 0.0, 0.0, 0.0], 
    "name": "Green", 
    "type": "bar" 
    }, { 
    "marker": {"color": "#C87B31"}, 
    "x": [3, 6], 
    "y": [270.0, 0.0], 
    "name": "Yellow", 
    "type": "bar" 
    }], 

disposizione:

{ 
    "margin": {"t": 0}, 
    "barmode": "stack", 
    "tickangle": -90, 
    "showlegend": true, 
    "xaxis": { 
     "title": "Idea", 
     "tickmode": "array", 
     "tickvals": [0, 1, 2, 3, 4, 5, 6, 7, 8], 
     "ticktext": ["A:0122", "A:0121", "A:0434", "A:0169", "A:0838", "A:0083",    
        "A:0175", "A:0081", "A:0687"] 
    }, 
    "yaxis": { 
     "title": "Result" 
    }} 

In alternativa, se si sei solo preoccupato del colore delle barre che puoi tracciare una t razza e colore insieme come un array:

var data = [{ 
     "x": ["A:0122", "A:0121", "A:0434", "A:0169", "A:0838", "A:0083", 
      "A:0175", "A:0081", "A:0687"], 
     "y": [1246.0, 1096.0, 1000.0, 270.0, 200.0, 0.0, 0.0, 0.0, 0.0], 
     "type": "bar", 
     "marker": {"color": ["#006666", "#006666", "#006666", "#C87B31", 
        "#006666", "#006666", "#C87B31", "#006666"]} 
    }], 
    layout = { 
     "margin": {"t": 0}, 
     "xaxis": {"title": "Idea"}, 
     "yaxis": {"title": "Result"} 
    }; 

Answer 2

Dal Plotly.js 1.10.2, è possibile utilizzare categoryorder e categoryarray per controllare l'ordine di un asse categorica. In questo modo è possibile mantenere x come un elenco di stringhe.

Usage:

var data = [ 
    { 
    "x": ["A", "D", "B"], 
    "y": [1, 2, 3], 
    "type": "bar" 
    }, 
    { 
    "x": ["C", "E"], 
    "y": [2, 3], 
    "type": "bar" 
}]; 

var layout = { 
    "xaxis": { 
     "categoryorder": "array", 
     "categoryarray": ["A", "B", "C", "D", "E"] 
    } 
}; 

Per esempio, esatto:

var data = [{ 
    "marker": { 
     "color": "#006666" 
    }, 
    "x": ["A:0122", "A:0121", "A:0434", "A:0838", "A:0083", "A:0081", "A:0687"], 
    "y": [1246.0, 1096.0, 1000.0, 200.0, 0.0, 0.0, 0.0], 
    "name": "Green", 
    "type": "bar" 
}, { 
    "marker": { 
     "color": "#C87B31" 
    }, 
    "x": ["A:0169", "A:0175"], 
    "y": [270.0, 0.0], 
    "name": "Yellow", 
    "type": "bar" 
}]; 

var layout = { 
    "margin": { 
     "t": 0 
    }, 
    "barmode": "stack", 
    "tickangle": -90, 
    "showlegend": true, 
    "xaxis": { 
     "title": "Idea", 
     "categoryorder": "array", 
     "categoryarray": ["A:0122", "A:0121", "A:0434", "A:0169", "A:0838", "A:0083", "A:0175", "A:0081", "A:0687"] 
    }, 
    "yaxis": { 
     "title": "Result" 
    } 
}; 

Risultato: