plotly.js中的分類軸順序

我有一個plotly.js條形圖表，我試圖讓分類軸的順序正確。每個類別有一個單一的酒吧，但有時他們是綠色的，有時他們是黃色的。酒吧應該按照從最高到最低的順序排列，但似乎是根據不同的填充順序排列。plotly.js中的分類軸順序

數據：

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」應該是第四個欄，但它是最後一個欄。

如何獲得酒吧的順序是我在tickvals中指定的順序？或者我可以用不同的方式指定他們的順序？

來源

2015-10-08 Jonathan

您可以設置x和tickvals到有序排列然後用ticktext即數據添加x軸標籤：

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

佈局：

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

另外，如果你只關心你可以繪製一個小節的酒吧的顏色種族和顏色集合作爲數組：

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

來源

2015-10-09 05:42:09 Chelsea

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

結果：

來源

2017-08-03 09:17:09 Mel

plotly.js中的分類軸順序

回答

相關問題