Amcharts：列系列图中的多类别轴网格对齐问题

问题描述

我正在尝试创建具有多个类别轴的水平柱状系列图表。 两个类别未与相同的网格线对齐。

我在下面尝试过，但仍然是同样的问题。 categoryAxis1.syncWithAxis = categoryAxis;

需要帮助来解决这个问题。

请参考以下链接 https://jsfiddle.net/8e0hqa6b/2/

/**
 * ---------------------------------------
 * 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

var chart = am4core.create("chartdiv",am4charts.XYChart);
chart.padding(40,40,40);
chart.topaxesContainer.layout = "horizontal";
chart.topaxesContainer.reverSEOrder = false;

var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
/* categoryAxis.renderer.grid.template.location = 0; */
categoryAxis.datafields.category = "network";
/* categoryAxis.renderer.minGriddistance = 1; */
categoryAxis.renderer.inversed = true;
categoryAxis.renderer.grid.template.disabled = true;
categoryAxis.layout = "absolute";
categoryAxis.renderer.labels.template.align = 'left';

// Set up axis title
categoryAxis.title.text = "Accounts";
categoryAxis.title.rotation = 0;
categoryAxis.title.align = "left";
categoryAxis.title.valign = "top";
categoryAxis.title.dy = -22;
categoryAxis.title.fontWeight = 500;

var categoryAxis1 = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis1.datafields.category = "MAU1";
categoryAxis1.renderer.inversed = true;
categoryAxis1.renderer.grid.template.disabled = true;
categoryAxis1.layout = "absolute";
categoryAxis1.renderer.labels.template.align = 'right';
categoryAxis1.syncWithAxis = categoryAxis;
// Set up axis title
categoryAxis1.title.text = "Amount";
categoryAxis1.title.rotation = 0;
categoryAxis1.title.align = "right";
categoryAxis1.title.valign = "top";
categoryAxis1.title.dy = -22;
categoryAxis1.title.fontWeight = 500;


var interfaceColors = new am4core.InterfaceColorSet();
var positiveColor = interfaceColors.getFor("positive");
var negativeColor = interfaceColors.getFor("negative");

var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.opposite = true;
valueAxis.min = 0;
valueAxis.renderer.labels.template.disabled = true;
valueAxis.renderer.grid.template.disabled = true;
valueAxis.renderer.baseGrid.disabled = true;


var series = chart.series.push(new am4charts.ColumnSeries());
series.datafields.categoryY = "network";
series.datafields.valueX = "MAU";
series.yAxis = categoryAxis;
series.tooltipText = "{valueX.value}"
series.columns.template.strokeOpacity = 0;
series.columns.template.column.cornerRadiusBottomright = 2;
series.columns.template.column.cornerRadiusTopRight = 2;
/* series.columns.template.column.dy = -6 */

var series1 = chart.series.push(new am4charts.ColumnSeries());
series1.datafields.categoryY = "MAU1";
series1.datafields.valueX = "MAU";
series1.yAxis = categoryAxis1;
series1.tooltipText = "{valueX.value}"
series1.columns.template.disabled = true;

// as by default columns of the same series are of the same color,we add adapter which takes colors from chart.colors color set
/* series.columns.template.adapter.add("fill",function(fill,target){
  return chart.colors.getIndex(target.dataItem.index);
}); */
/* categoryAxis1.sortBySeries = series; */
/* categoryAxis.sortBySeries = series; */

chart.data = [{
    "network": "Facebook","MAU": 2255250000,"MAU1": 2255250000
  },{
    "network": "Google+","MAU": 430000000,"MAU1": 430000000
  },{
    "network": "Instagram","MAU": 1000000000,"MAU1": 1000000000
  },{
    "network": "Pinterest","MAU": 246500000,"MAU1": 246500000
  },{
    "network": "Reddit","MAU": 355000000,"MAU1": 355000000
  },{
    "network": "TikTok","MAU": 500000000,"MAU1": 500000000
  },{
    "network": "Tumblr","MAU": 624000000,"MAU1": 624000000
  },{
    "network": "Twitter","MAU": 329500000,"MAU1": 329500000
  },{
    "network": "WeChat","MAU1": 1000000000
  }
]

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）