Хитрая часть - это родительская категория 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
для построения графика.
скрипка: http://jsfiddle.net/davidliang2008/kp16Lv4a/