Amcharts类别轴标签重叠

Question

我使用的是amCharts javascript charts版本3，我也尝试过最新版本。

问题是:我有一个带有scrollBar的lineChart，该图表的categoryAxis有超过100条记录，所以一开始渲染它只显示5-6个记录，然后我缩放以查看更多的categoryAxis标签。到目前一切尚好。

但是当我缩放时，categoryAxis上的标签重叠了，所以所有的东西看起来都乱七八糟的，这实际上是由于缩放后网格数量的增加。

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

请帮忙，提前谢谢。

Answer 1

我的Category轴也有同样的问题，它包含日期。我解决了这个问题，下面是我的解决方案:最重要的部分是将parseDate设置为false

categoryAxis.parseDates = false;

您必须将categoryAxis.autoGridCount设置为true，因为根据轴的大小自动设置gridCount的数量是很重要的。

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;

Answer 2

请尝试使用categoryAxis.renderer.minGridDistance属性。这将告诉图表不要将标签/网格放置在比上述像素值更近的位置。增加这些数字将意味着可能更稀疏的网格线和相关标签。减少可能会导致更密集的网格/标签。

示例用法：categoryAxis.renderer.minGridDistance = 40;

更多信息：Amcharts documentation for the same

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
}