AmCharts：带子类别的带标记的条形图

xxb16uws  于 9个月前  发布在  Chart.js
关注(0)|答案(2)|浏览(68)

我尝试在amcharts中实现一个带有子类别的聚类条形图（x轴上有两个级别）。我找不到办法。
有人知道怎么做吗？

chart.js

2条答案

按热度按时间
3hvapo4f

3hvapo4f1#

棘手的部分是图上的父类别name_fr。为此，我们需要在CategoryAxis中使用Guide（https://docs.amcharts.com/3/javascriptcharts/Guide）。
但是为了使用Guide，每个类别都需要一个唯一的标识符，因为每个指南（在您的情况下，它是每个名称）都需要一个起点字段（称为Category）和一个终点字段（称为ToCategory）。

为每个数据点创建ID

在这里，我只是concat名称和日期字段。如果你的数据有一个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函数来执行group by，但这里我很懒，只想使用一个名为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以生成图形。

fiddle：http://jsfiddle.net/davidliang2008/kp16Lv4a/

赞(0）分享  回复(0）举报  9个月前
ct2axkht

ct2axkht2#

我已经重新定义了子类别问题i have developed Clustered bar chart with sub categories as Years - 200X and P1, P2....的条形图
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>

我已经添加了自定义的颜色传说，你可以创建自定义的颜色

赞(0）分享  回复(0）举报  9个月前
我来回答

相关问题

    查看更多
    微信公众号

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com