Amcharts分类轴标签重叠问题

Question

我正在使用amCharts JavaScript图表的版本3，我也尝试了最新版本。

问题是：我有一个带有滚动条的lineChart，该图表的categoryAxis具有超过100个记录，因此在首次呈现时，它只显示5-6个记录，然后我缩放以查看更多的categoryAxis标签。目前为止还算顺利。

但是当我进行缩放时，categoryAxis上的标签会重叠，导致一切看起来很混乱，实际上是由于缩放后网格数量的增加造成的。

我已经尝试过categoryAxis.autoGridCount，但没有成功。

请帮忙解决，谢谢！

- Sachin Verma

Answer 1

我的类别轴包含日期，遇到了同样的问题。我解决了这个问题，以下是我的解决方案： 最重要的部分是将 parseDate 设置为 false。

categoryAxis.parseDates = false;

你必须将categoryAxis.autoGridCount设置为true，因为根据轴的大小自动设置网格数目非常重要。

categoryAxis.autoGridCount = true;

那么。

categoryAxis.minHorizontalGap = 100;

有人提到这会在日期之间创建空格。

我的用法是：

    //Category Axes
    var categoryAxis = chart2.categoryAxis;
    categoryAxis.gridAlpha = 0;
    categoryAxis.autoGridCount = true;
    categoryAxis.minHorizontalGap = 100;
    categoryAxis.gridPosition = "start";
    categoryAxis.equalSpacing = false;
    categoryAxis.parseDates = false;
    categoryAxis.minPeriod = "DD";
    categoryAxis.startOnAxis = true;
    categoryAxis.axisColor = "#dcdcdc";
    categoryAxis.axisThickness = 1;
    categoryAxis.showLastLabel = true;

- vanrado

Answer 2

尝试使用categoryAxis.renderer.minGridDistance属性。这将告诉图表在像素上不要将标签/网格放得太近。增加这些数字可能意味着更稀疏的网格线和相关标签。减少可能会导致更密集的网格/标签。 示例用法：categoryAxis.renderer.minGridDistance = 40; 更多信息：Amcharts文档相同部分

- backslashN

Answer 3

我知道这是一个比较老的问题，但最近我遇到了这个问题，而且在网上找不到令人满意的解决方案。旋转类别标签的问题在于它可能会使图表缩小太多！

我想到的解决方法是使用标签格式化程序垂直交错类别标签。

我的格式化程序：

var up = false;

function formatLabel(value, valueString, axis){
    if(up) {
        axis.labelOffset=0;
    }
    else {
        axis.labelOffset=25;
    }
    up=!up;

    return value;
}

这里有一些关于设置格式化程序的信息。

https://amcharts.zendesk.com/entries/23473053-Formatting-axis-labels-using-custom-function

但基本上您需要做的就是在轴上设置labelFunction。

"categoryAxis": {
    "labelFunction":formatLabel
}

- YanisTheYak

Answer 4

autoGridCount应设置为true。根据您的描述，我猜测您的轴标签中有相当多的文本。我建议将categoryAxis的minHorizontalGap增加到100左右（默认值为75）。如果这样做不起作用，我需要看一下您的图表。

- zeroin

---

尝试了这个，不幸的是没有成功！但我通过旋转标签文本一定角度来解决了重叠问题。 - Sachin Verma