时间戳

首页 > 解决方案 > amCharts 已聚集但未堆叠

amcharts - amCharts 已聚集但未堆叠

问题描述

我正在寻找如何构建一个集群但不堆叠（分层）的 amChart。一个例子是比较过去 3 年的月度。对于每个月，我想查看已售出与已发货，第 1,2 年和第 3 年的集群。

具体来说，使用下面的示例，我需要 N America 位于欧洲的顶部或与欧洲相同的集群中。目前它跨越所有集群。

代码：

var chart = AmCharts.makeChart( "chartdiv", {
"type": "serial",
"legend": {
    "horizontalGap": 10,
    "useGraphSettings": true,
    "markerSize": 10
},
"dataProvider": [ {
    "year": 2003,
    "europe": 2.5,
    "namerica": 1.5,
    "asia": 2.1,
    "lamerica": 1.2,
}, {
    "year": 2004,
    "europe": 2.6,
    "namerica": 2.7,
    "asia": 2.2,
    "lamerica": 1.3,
}, {
    "year": 2005,
    "europe": 2.8,
    "namerica": 2.9,
    "asia": 2.4,
    "lamerica": 1.4,
} ],
"valueAxes": [ {
    "stackType": "regular",
    "axisAlpha": 0,
    "gridAlpha": 0
} ],
"graphs": [ {
    "fillAlphas": 0.8,
    "labelText": "[[title]]",
    "lineAlpha": 0.3,
    "title": "Europe",
    "type": "column",
    "color": "#000000",
    "valueField": "europe"
}, {
    "fillAlphas": 0.8,
    "labelText": "[[title]]",
    "lineAlpha": 0.3,
    "title": "N America",
    "type": "column",
    "color": "#000000",
    "columnWidth":0.3,
    "clustered":false,
    "stackable": false,
    "valueField": "namerica"
}, {
    "fillAlphas": 0.8,
    "labelText": "[[title]]",
    "lineAlpha": 0.3,
    "title": "Asia-Pacific",
    "type": "column",
    "newStack": true,
    "color": "#000000",
    "valueField": "asia"
}, {
    "fillAlphas": 0.8,
    "labelText": "[[title]]",
    "lineAlpha": 0.3,
    "title": "L America",
    "type": "column",
    "color": "#000000",
    "valueField": "lamerica"
} ],
"categoryField": "year",
"categoryAxis": {
    "gridPosition": "start",
    "axisAlpha": 0,
    "gridAlpha": 0,
    "position": "left"
}});

我可以靠近这里：
jsFiddle

我正在尝试合并这两个图表：
https ://www.amcharts.com/demos/stacked-clustered-column-chart/
https://www.amcharts.com/demos/layered-column-chart/


谢谢！

标签： amcharts

解决方案

使列居中在同一个集群中的最接近的方法是设置 value axis'并将andstackType: 3d调整为较小的值，以便它们对齐：angledepth3D

AmCharts.makeChart("...", {
  // ...
  "depth3D": 0, //0 depth to remove the 3d effect and achieve layering.
  "angle": 0, //0 angle to center the columns within the cluster. won't 100% center if depth3D is a non-zero value
  "columnSpacing3D" : 0,
  "columnSpacing": 20, //space the clusters out
   // ...
  "valueAxes": [ {
    "stackType": "3d",
    "axisAlpha": 0,
    "gridAlpha": 0
  } ],
  // ...
});

之后您所要做的就是修复图形定义以newStack: true在每两个图形之后设置属性。

演示：

var chart = AmCharts.makeChart( "chartdiv", {
  "type": "serial",
  "depth3D": 0, //0 depth to remove the 3d effect and achieve layering.
  "angle": 0, //0 angle to center the columns within the cluster. won't 100% center if depth3D is a non-zero value
  "columnSpacing3D" : 0,
  "columnSpacing": 20, //space the clusters out
  "legend": {
    "horizontalGap": 10,
    "useGraphSettings": true,
    "markerSize": 10
  },
  "dataProvider": [ {
    "year": 2003,
    "europe": 2.5,
    "namerica": 1.5,
    "asia": 2.1,
    "lamerica": 1.2,
  }, {
    "year": 2004,
    "europe": 2.6,
    "namerica": 2.7,
    "asia": 2.2,
    "lamerica": 1.3,
  }, {
    "year": 2005,
    "europe": 2.8,
    "namerica": 2.9,
    "asia": 2.4,
    "lamerica": 1.4,
  } ],
  "valueAxes": [ {
    "stackType": "3d",
    "axisAlpha": 0,
    "gridAlpha": 0
  } ],
  "graphs": [ {
    "fillAlphas": 0.8,
    "labelText": "[[title]]",
    "lineAlpha": 0.3,
    "title": "Europe",
    "type": "column",
    "color": "#000000",
    "valueField": "europe"
  }, {
    "fillAlphas": 0.8,
    "labelText": "[[title]]",
    "lineAlpha": 0.3,
    "title": "N America",
    "type": "column",
    "color": "#000000",
    "valueField": "namerica"
  }, {
    "fillAlphas": 0.8,
    "labelText": "[[title]]",
    "lineAlpha": 0.3,
    "title": "Asia-Pacific",
    "type": "column",
    "color": "#000000",
    "newStack": true,
    "valueField": "asia"
  }, {
    "fillAlphas": 0.8,
    "labelText": "[[title]]",
    "lineAlpha": 0.3,
    "title": "L America",
    "type": "column",
    
    "color": "#000000",
    "valueField": "lamerica"
  } ],
  "categoryField": "year",
  "categoryAxis": {
    "gridPosition": "start",
    "axisAlpha": 0,
    "gridAlpha": 0,
    "position": "left"
  }

} );
#chartdiv {
  width: 100%;
  height: 500px;
}												
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>

推荐阅读