plotly.js में वर्गीकृत धुरी ऑर्डर

Question

मेरे पास एक 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} 

लेकिन यहाँ परिणाम है:

ध्यान दें कि "ए: 0169" चौथा बार होना चाहिए, लेकिन इसके बजाय यह आखिरी है।

मैं tickvals में निर्दिष्ट क्रम में बार कैसे प्राप्त करूं? या क्या मैं अपना ऑर्डर अलग तरीके से निर्दिष्ट कर सकता हूं?

Answer 1

आप एक आदेश दिया सरणी x और tickvals सेट कर सकते हैं तो ticktext यानी डेटा के साथ xaxis लेबल जोड़:

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

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

परिणाम: