amCharts 聚集但未堆叠

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

我正在寻找如何构建一个集群但不堆叠（分层）的 amChart。一个例子是比较过去 3 年的逐月情况。对于每个月，我希望看到第 1,2 年和第 3 年的销量与发货量。

具体来说，使用下面的示例，我需要北美位于欧洲之上或位于欧洲同一集群中。目前它遍布所有集群。

代码：

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
2个回答
0
投票

将列集中在同一簇中时实现此目的的最接近方法是设置值轴' 

stackType: 3d
并将 
angle
和 
depth3D
调整为较小的值，以便它们对齐：

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>

0
投票

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

//https://jsfiddle.net/amantandon1/09d3f8cr/19/
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
}];

// 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 = '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);


chart.maskBullets = false;
chart.height = 500;
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>

请检查集群 - 堆叠 - 组

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.