plotly.jsのカテゴリ軸の順序

Question

私はカテゴリ軸の順序を正しく取得しようとしているplotly.js棒グラフを持っています。各カテゴリには1本のバーがありますが、時には緑色で、時には黄色です。棒グラフは最高から最低の順に並べる必要がありますが、異なる塗りつぶしに基づいてプロットすると思われます。

データ：

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", 
     "tickmode": "array", 
     "tickvals": ["A:0122", "A:0121", "A:0434", "A:0169", "A:0838", "A:0083", "A:0175", "A:0081", "A:0687"] 
    }, 
    "yaxis": { 
     "title": "Result" 
    } 
}; 

その他configuation：

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

しかし、ここでの結果である：

「A：0169」は4番目のバーでなければならないことに注意してください。

バーを指定した順番にするにはどうすればいいですか？tickvals？または、注文を別の方法で指定することはできますか？

Answer 1

あなたはticktext すなわちデータとx軸ラベルを追加し、その後命じた配列にxとtickvalsを設定することができます：あなたの場合は、代わりに

{ 
    "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" 
    }} 

：

[{ 
    "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" 
    }], 

レイアウトあなたは1つのプロットすることができますバーの色だけを心配している配列として色をレースと設定：

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

Plotly.js 1.10.2ので、あなたは、カテゴリ軸の順序を制御するcategoryorderとcategoryarrayを使用することができます。この方法で、xを文字列のリストとして保持することができます。

使用法：あなたの正確なたとえば

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"] 
    } 
}; 

：

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" 
    } 
}; 

結果：