AmCharts：带有子类别的簇状条形图

Question

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

有谁知道怎么做吗？

Answer 1

棘手的部分是图表上的父类别

name_fr

。为此，我们需要在

Guide

中使用 CategoryAxis(

https://docs.amcharts.com/3/javascriptcharts/Guide

)。

但是为了使用

Guide

，每个类别都需要一个唯一的标识符，因为每个指南（在您的情况下，是每个名称）都需要一个起点字段（称为

Category

）和一个终点字段（称为

ToCategory

）。

为每个数据点创建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
    }
];

从数据创建 Guide 数组

在将数据插入

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/

Answer 2

我已经解决了带有子类别的簇状条形图问题

https://jsfiddle.net/amantandon1/09d3f8cr/33/

/**
 * ---------------------------------------
 * This demo was created using amCharts 4.
 * 
 * For more information visit:
 * https://www.amcharts.com/
 * 
 * Documentation is available at:
 * https://www.amcharts.com/docs/v4/
 * ---------------------------------------
 */

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);

// Add data
chart.data = [ {
  "year": "2003",
  "P1":0,
  "P2":0,
  "p3":0,
  "namerica-p1": 3.0,
  "namerica-p3": 6.7,
  "asia-p1": 4.2,
  "asia-p2": 3.2,
  "africa-p3": 5.1
}, {
  "year": "2004",
  "P1":0,
  "P2":0,
  "p3":0,
  "namerica-p1": 2.7,
  "namerica-p2": 4.7,
  "asia-p1": 2.2,
  "asia-p3": 5.2,
  "africa-p1": 3.1
}, {
  "year": "2005",
  "P1":0,
  "P2":0,
  "p3":0,
  "namerica-p1": 1.7,
  "namerica-p2": 2,
  "namerica-p3": 3.9,
  "asia-p1": 8.2,
  "asia-p2": 11,
  "asia-p3": 13,
  "africa-p3": 15.1
},{
  "year": "2006",
  "P1":0,
  "P2":0,
  "p3":0,
  "namerica-p1": 3.0,
  "namerica-p3": 6.7,
  "asia-p1": 4.2,
  "asia-p2": 3.2,
  "africa-p3": 5.1
}, {
  "year": "2007",
  "P1":0,
  "P2":0,
  "p3":0,
  "namerica-p1": 2.7,
  "namerica-p2": 4.7,
  "asia-p1": 2.2,
  "asia-p3": 5.2,
  "africa-p1": 3.1
}, {
  "year": "2008",
  "P1":0,
  "P2":0,
  "p3":0,
  "namerica-p1": 1.7,
  "namerica-p2": 2,
  "namerica-p3": 3.9,
  "asia-p1": 8.2,
  "asia-p2": 11,
  "asia-p3": 13,
  "africa-p3": 15.1
},{
  "year": "2009",
  "P1":0,
  "P2":0,
  "p3":0,
  "namerica-p1": 3.0,
  "namerica-p3": 6.7,
  "asia-p1": 4.2,
  "asia-p2": 3.2,
  "africa-p3": 5.1
}, {
  "year": "2010",
  "P1":0,
  "P2":0,
  "p3":0,
  "namerica-p1": 2.7,
  "namerica-p2": 4.7,
  "asia-p1": 2.2,
  "asia-p3": 5.2,
  "africa-p1": 3.1
}, {
  "year": "2011",
  "P1":0,
  "P2":0,
  "p3":0,
  "namerica-p1": 1.7,
  "namerica-p2": 2,
  "namerica-p3": 3.9,
  "asia-p1": 8.2,
  "asia-p2": 11,
  "asia-p3": 13,
  "africa-p3": 15.1
}];

// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
 
categoryAxis.dataFields.category = "year";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 20;
categoryAxis.renderer.inside = true;
categoryAxis.renderer.labels.template.valign = "top";
categoryAxis.renderer.labels.template.fontSize = 12;
categoryAxis.renderer.cellStartLocation = 0.1;
categoryAxis.renderer.cellEndLocation = 0.9;

var  valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
valueAxis.max = ("{valueY.Total}" + '50');

// Create series
function createSeries(field, name, stacked, a) {

    var dValue = a != undefined ? a : "{valueY}"; 
  var series = chart.series.push(new am4charts.ColumnSeries());
  series.dataFields.valueY = field;
  series.dataFields.categoryX = "year";
  series.name = name;
  series.columns.template.tooltipText = "{name}: [bold]{valueY}[/]";
  // series.fill = "rgba(220,220,220,0.1)";
   // series.fill = 0;
//  series.fill = 'blue';
  series.stacked = stacked;
  

  series.columns.template.width = am4core.percent(95);
  
  var bullet = series.bullets.push(new am4charts.LabelBullet());
  bullet.label.text = dValue;
  //bullet.label.rotation = 90;
  bullet.label.truncate = false;

  bullet.label.hideOversized = false;
  bullet.label.vertical = "bottom";
  bullet.locationY = 0;
  bullet.locationY = 0;
  bullet.dy = 8;
  bullet.label.fontSize = 8;
  
  
}
 
  
var series1 = createSeries("P1", "Advento", false, "P1");

var series3 = createSeries("namerica-p1", "Noth America", true);
var series2 = createSeries("asia-p1", "Asia", true);
var series4 = createSeries("africa-p1", "Africa", true);

var series1 = createSeries("P2", "Xmplex", false, "P2");

var series3 = createSeries("namerica-p2", "Noth America", true);
var series2 = createSeries("asia-p2", "Asia", true);
var series4 = createSeries("africa-p2", "Africa", true);

var series1 = createSeries("p3", "ASC", false, "P3");
var series3 = createSeries("namerica-p3", "Noth America", true);
var series2 = createSeries("asia-p3", "Asia", true);
var series4 = createSeries("africa-p3", "Africa", true);
var series4 = createSeries("asia-p2", "Asia", true);

var series1 = createSeries("p3", "ASC", false, "P3");
var series3 = createSeries("namerica-p3", "Noth America", true);
var series2 = createSeries("asia-p3", "Asia", true);
var series4 = createSeries("africa-p3", "Africa", true);
var series4 = createSeries("asia-p2", "Asia", true);

var series1 = createSeries("p3", "ASC", false, "P3");
var series3 = createSeries("namerica-p3", "Noth America", true);
var series2 = createSeries("asia-p3", "Asia", true);
var series4 = createSeries("africa-p3", "Africa", true);
var series4 = createSeries("asia-p2", "Asia", true);


chart.maskBullets = false;
chart.height = 400;


// Add legend
chart.legend = new am4charts.Legend();
chart.legend.position = 'bottom';
chart.legend.fontSize = 9;
chart.legend.dy = 14;
//chart.legend.maxHeight = 200;
chart.legend.scrollable = true;
chart.legend.itemContainers.template.clickable = false;
chart.legend.itemContainers.template.focusable = false;
chart.legend.data = [
    {"name":'Asia',"fill":'red'},
  {"name":'North America',"fill":'blue'},
  {"name":'Africa',"fill":'green'}
];

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 500px;
}

#chartdiv {
    width   : 100%;
    height  : 500px;
}

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>


<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>

<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<div id="chartdiv">
  
  
</div>

我为颜色添加了自定义图例，您可以创建自定义颜色

AmCharts：带有子类别的簇状条形图

问题描述投票：0回答：2

2个回答

为每个数据点创建ID

从数据创建 Guide 数组

制作图表

最新问题

AmCharts：带有子类别的簇状条形图

问题描述 投票：0回答：2

2个回答

为每个数据点创建ID

从数据创建 Guide 数组

制作图表

最新问题

问题描述投票：0回答：2