AmCharts: кластеризованная гистограмма с подкатегориями - PullRequest
0 голосов
/ 15 ноября 2018

Я пытаюсь реализовать кластеризованную гистограмму с подкатегориями в amcharts (два уровня по моей оси X).Я не мог найти способ сделать это.

Кто-нибудь знает, как это сделать?

Пример моих данных и необходимого мне графика доступны по следующей ссылке:

https://www.european -datalab.com/data-clustered-bar-chart/

1 Ответ

0 голосов
/ 16 ноября 2018

Хитрая часть - это родительская категория 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 руководства.

Вы можете написать свою собственную функцию JavaScript для группирования, но здесь я ленив и просто хочу использовать библиотеку с именем 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 для построения графика.

enter image description here

скрипка: http://jsfiddle.net/davidliang2008/kp16Lv4a/

...