问题描述
我尝试制作一个股票图，将堆积的列对齐。 https://codepen.io/guillaumecardon/pen/bGpVpEQ
var chartTwo = am4core.create("chartdivTwo",am4charts.XYChart);
chartTwo.data = [{"date":"2020-01","in_nb":20,"in_total":11,"out_nb":14,"out_total":20,"ratio":57},{"date":"2020-02","in_nb":16,"in_total":12,"out_nb":18,"out_total":9,"ratio":67},{"date":"2020-03","in_nb":19,"in_total":5,"out_nb":12,"out_total":5,"ratio":51},{"date":"2020-04","in_nb":13,"in_total":19,"out_nb":16,"out_total":16,{"date":"2020-05","in_total":16,"out_nb":5,"ratio":70},{"date":"2020-06","in_nb":14,"in_total":18,"out_nb":9,"out_total":12,"ratio":66},{"date":"2020-07","in_nb":8,"in_total":7,"ratio":80},{"date":"2020-08","in_total":15,"out_nb":8,"out_total":10,"ratio":68},{"date":"2020-09","out_nb":20,"ratio":61},{"date":"2020-10","in_nb":15,"out_nb":6,"out_total":7,"ratio":64},{"date":"2020-11","in_total":8,"out_nb":10,"out_total":11,{"date":"2020-12","in_nb":12,"ratio":58}];
// Set input format for the dates
chartTwo.dateFormatter.inputDateFormat = "yyyy-MM";
var dateAxis = chartTwo.xAxes.push(new am4charts.DateAxis());
dateAxis.tooltipDateFormat = "MMMM yyyy";
dateAxis.renderer.grid.template.location = 0;
dateAxis.renderer.ticks.template.length = 8;
dateAxis.renderer.ticks.template.strokeOpacity = 0.1;
dateAxis.renderer.grid.template.disabled = true;
dateAxis.renderer.ticks.template.disabled = false;
dateAxis.renderer.ticks.template.strokeOpacity = 0.2;
dateAxis.renderer.minLabelPosition = 0.01;
dateAxis.renderer.maxLabelPosition = 0.99;
dateAxis.keepSelection = true;
dateAxis.minHeight = 30;
dateAxis.groupData = true;
dateAxis.minZoomCount = 5;
var valueAxis = chartTwo.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.zIndex = 1;
valueAxis.renderer.baseGrid.disabled = true;
valueAxis.height = am4core.percent(10);
valueAxis.renderer.gridContainer.background.fill = am4core.color("#000000");
valueAxis.renderer.gridContainer.background.fillOpacity = 0.05;
valueAxis.renderer.inside = true;
valueAxis.renderer.labels.template.verticalCenter = "bottom";
valueAxis.renderer.labels.template.padding(2,2,2);
valueAxis.renderer.fontSize = "0.8em"
var series = chartTwo.series.push(new am4charts.Lineseries());
series.datafields.dateX = "date";
series.datafields.valueY = "ratio";
series.tooltipText = "{name} : [bold]{valueY}[/]";
series.name = "Ratio";
series.defaultState.transitionDuration = 0;
var valueAxis2 = chartTwo.yAxes.push(new am4charts.ValueAxis());
valueAxis2.tooltip.disabled = true;
valueAxis2.zIndex = 3;
valueAxis2.renderer.baseGrid.disabled = true;
valueAxis2.height = am4core.percent(33);
valueAxis2.renderer.gridContainer.background.fill = am4core.color("#000000");
valueAxis2.renderer.gridContainer.background.fillOpacity = 0.05;
valueAxis2.renderer.inside = true;
valueAxis2.renderer.labels.template.verticalCenter = "bottom";
valueAxis2.renderer.labels.template.padding(2,2);
valueAxis2.renderer.fontSize = "0.8em"
valueAxis2.marginTop = 30;
var series2 = chartTwo.series.push(new am4charts.ColumnSeries());
series2.datafields.dateX = "date";
series2.datafields.valueY = "out_nb";
series2.yAxis = valueAxis2;
series2.tooltipText = "{name} : [bold]{valueY}[/]";
series2.name = "OUT_NB";
series2.defaultState.transitionDuration = 0;
var series3 = chartTwo.series.push(new am4charts.ColumnSeries());
series3.datafields.dateX = "date";
series3.datafields.valueY = "out_total";
series3.yAxis = valueAxis2;
series3.tooltipText = "{name} : [bold]{valueY}[/]";
series3.name = "OUT_TOTAL";
series3.defaultState.transitionDuration = 0;
series3.stacked = true;
var valueAxis3 = chartTwo.yAxes.push(new am4charts.ValueAxis());
valueAxis3.tooltip.disabled = true;
valueAxis3.zIndex = 3;
valueAxis3.renderer.baseGrid.disabled = true;
valueAxis3.height = am4core.percent(34);
valueAxis3.renderer.gridContainer.background.fill = am4core.color("#000000");
valueAxis3.renderer.gridContainer.background.fillOpacity = 0.05;
valueAxis3.renderer.inside = true;
valueAxis3.renderer.labels.template.verticalCenter = "bottom";
valueAxis3.renderer.labels.template.padding(2,2);
valueAxis3.renderer.fontSize = "0.8em"
valueAxis3.marginTop = 30;
var series4 = chartTwo.series.push(new am4charts.ColumnSeries());
series4.datafields.dateX = "date";
series4.datafields.valueY = "in_nb";
series4.yAxis = valueAxis3;
series4.tooltipText = "{name} : [bold]{valueY}[/]";
series4.name = "IN_NB";
series4.defaultState.transitionDuration = 0;
var series5 = chartTwo.series.push(new am4charts.ColumnSeries());
series5.datafields.dateX = "date";
series5.datafields.valueY = "in_total";
series5.yAxis = valueAxis3;
series5.tooltipText = "{name} : [bold]{valueY}[/]";
series5.name = "IN_TOTAL";
series5.defaultState.transitionDuration = 0;
series5.stacked = true;
chartTwo.legend = new am4charts.Legend();
chartTwo.cursor = new am4charts.XYCursor();
chartTwo.cursor.lineY.opacity = 0;
chartTwo.cursor.xAxis = dateAxis;
但是，Amcharts会为其他子图表中使用的列保留空间。
对齐所有列是否有技巧？ （例如，基于图表光标的对齐） 我找到了一种解决方法here，使用了隐藏的Axis，但也许有一种更简单的方法。
谢谢！
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）