AmCharts: उप-श्रेणियों के साथ क्लस्टर्ड बार चार्ट

मुश्किल हिस्सा ग्राफ पर मूल श्रेणी name_fr है। ऐसा करने के लिए, हमें Guide(https://docs.amcharts. com/3/javascriptcharts/Guide) CategoryAxis के भीतर।

लेकिन Guide का उपयोग करने के लिए, प्रत्येक श्रेणी को एक विशिष्ट पहचानकर्ता की आवश्यकता होती है क्योंकि प्रत्येक मार्गदर्शिका (आपके मामले में, यह प्रत्येक नाम है) को एक प्रारंभिक बिंदु फ़ील्ड (जिसे Category कहा जाता है) और एक अंतिम बिंदु फ़ील्ड (जिसे कहा जाता है) की आवश्यकता होती है। ToCategory)।

प्रत्येक डेटा बिंदु के लिए आईडी बनाएं

यहाँ मैं सिर्फ नाम और दिनांक फ़ील्ड को सम्मिलित करता हूँ। यदि आपके डेटा में एक आईडी फ़ील्ड है, तो आप उसका भी उपयोग कर सकते हैं।

let data = [
    {
        "category": "Allemagne-1/3/2005",
        "name_fr": "Allemagne",
        "date": "1/3/2005",
        "Décile 1": 11.91166848,
        "Décile 5": 6.663209907,
        "Décile 9": 3.912389412
    },
    {
        "category": "Allemagne-12/18/2017",
        "name_fr": "Allemagne",
        "date": "12/18/2017",
        "Décile 1": 12.08203299,
        "Décile 5": 6.181569343,
        "Décile 9": 3.380401158
    },
    {
        "category": "Espagne-1/3/2005",
        "name_fr": "Espagne",
        "date": "1/3/2005",
        "Décile 1": 18.16145046,
        "Décile 5": 8.049555152,
        "Décile 9": 4.02786022
    },
    {
        "category": "Espagne-12/18/2017",
        "name_fr": "Espagne",
        "date": "12/18/2017",
        "Décile 1": 22.27695636,
        "Décile 5": 8.698725621,
        "Décile 9": 4.224440949
    },
    {
        "category": "France-1/3/2005",
        "name_fr": "France",
        "date": "1/3/2005",
        "Décile 1": 11.29143493,
        "Décile 5": 6.365859777,
        "Décile 9": 3.476250813
    },
    {
        "category": "France-12/18/2017",
        "name_fr": "France",
        "date": "12/18/2017",
        "Décile 1": 11.46405229,
        "Décile 5": 6.355936042,
        "Décile 9": 3.441408741
    },
    {
        "category": "Italie-1/3/2005",
        "name_fr": "Italie",
        "date": "1/3/2005",
        "Décile 1": 16.86187094,
        "Décile 5": 7.798630041,
        "Décile 9": 4.017535647
    },
    {
        "category": "Italie-12/18/2017",
        "name_fr": "Italie",
        "date": "12/18/2017",
        "Décile 1": 21.92640815,
        "Décile 5": 9.365977512,
        "Décile 9": 4.893619709
    },
    {
        "category": "Royaume-Uni-1/3/2005",
        "name_fr": "Royaume-Uni",
        "date": "1/3/2005",
        "Décile 1": 13.55694413,
        "Décile 5": 6.402068504,
        "Décile 9": 3.057193284
    },
    {
        "category": "Royaume-Uni-12/19/2016",
        "name_fr": "Royaume-Uni",
        "date": "12/19/2016",
        "Décile 1": 13.19564289,
        "Décile 5": 6.639341135,
        "Décile 9": 3.359725023
    }
];

डेटा से गाइड सरणी बनाएं

इससे पहले कि आप डेटा को AmChart में प्लग करें, यदि आप Guide एरे को हार्ड कोड नहीं करना चाहते हैं, तो आप पहले डेटा से इसे जेनरेट कर सकते हैं।

यहाँ विचार name_fr द्वारा डेटा के आधार पर समूहित करने का है, और फिर पहली आइटम श्रेणी को गाइड के Category के रूप में, और अंतिम आइटम श्रेणी को गाइड के ToCategory के रूप में लें।

आप समूह करने के लिए अपना स्वयं का जावास्क्रिप्ट फ़ंक्शन लिख सकते हैं, लेकिन यहां मैं आलसी हूं और केवल underscore.js (https://underscorejs.org) ऐसा करने के लिए।

let byName = _.groupBy(data, "name_fr");
let guides = _.map(byName, function(items, key) {
    return {
        "category": _.first(items).category,
        "toCategory": _.last(items).category,
        "lineAlpha": 0,
        "expand": true,
        "label": key,
        "labelRotation": 0,
        "tickLength": 80
    };
});

ग्राफ बनाएं

फिर आप ग्राफ़ बनाने के लिए डेटा को गाइड के साथ AmChart में फीड कर सकते हैं।

fiddle: http://jsfiddle.net/davidliang2008/kp16Lv4a/