AmCharts：带有子类别的聚集条形图答案

【问题标题】：AmCharts: Clustered bar chart with sub-categoriesAmCharts：带有子类别的聚集条形图
【发布时间】：2018-11-15 16:30:00
【问题描述】：

我尝试在 amcharts 中实现一个带有子类别的聚集条形图（我的 x 轴上有两个级别）。我找不到办法。

有人知道怎么做吗？

【问题讨论】：

标签： chart.js bar-chart amcharts

【解决方案1】：

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

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

为每个数据点创建 ID

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

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/

【讨论】：

不错的解决方案，它适用于 amchart4 吗？
@Rinold：抱歉，我没有关注 amchart4，所以我不确定。你自己试过吗？