AmCharts:具有子类别的群集条形图 [英] AmCharts: Clustered bar chart with sub-categories

问题描述

我试图实现一个簇状的条形图，其中的子类别在amcharts中(在我的x轴上为两个级别).我找不到办法.

I try to realize a clustered bar chart with sub-categories in amcharts (two levels in my x-axis). I couldn't find a way to do it.

有人知道怎么做吗?

推荐答案

棘手的部分是图形上的父类别name_fr.为此，我们需要使用Guide( https://docs.amcharts.com/CategoryAxis中的3/javascriptcharts/Guide ).

The tricky part is the parent category name_fr on the graph. To do that, we need to use Guide(https://docs.amcharts.com/3/javascriptcharts/Guide) within the CategoryAxis.

但是为了使用Guide，每个类别都需要一个唯一的标识符，因为每个指南(在您的情况下，它是每个名称)都需要一个起点字段(称为Category)和一个终点字段(称为).

But in order to use Guide, each category needs an unique identifier as each guide (in your case, it's each name) needs a starting point field (called Category) and an ending point field (called ToCategory).

在这里，我只是连接名称和日期字段.如果您的数据有一个ID字段，您也可以使用它.

Here I just concat the name and date field. If your data has an ID field, you can use that too.

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数组进行硬编码，则可以先从数据中生成该数据.

Create Guide array from data

Before you plug the data into AmChart, if you don't want to hard code the Guide array, you can generate that from the data first.

这里的想法是将数据按name_fr分组，然后将第一个项目类别作为指南的Category，将最后一个项目类别作为指南的ToCategory.

The idea here is to group by the data by name_fr, and then grab the first item category as the Category of the guide, and the last item category as the ToCategory of the guide.

您可以编写自己的JavaScript函数进行分组依据，但是在这里我很懒，只想使用一个名为underscore.js的库(

You can write your own JavaScript function to do group by, but here I am lazy and just want to use a library called underscore.js (https://underscorejs.org) to do so.

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中以制作图形.

Make the graph

Then you can feed the data along with the guides into AmChart to make the graph.

提琴手: http://jsfiddle.net/davidliang2008/kp16Lv4a/

这篇关于AmCharts:具有子类别的群集条形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！