Question

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

问题是：我有一个带有scrollBar的lineChart，该图表的categoryAxis有超过100条记录，因此首先渲染它只显示5-6然后我缩放以查看更多categoryAxis标签。到目前为止一切都很好。

但是当我缩放时，categoryAxis上的标签会重叠，所以由于缩放后网格数量的增加，所有内容实际上都会混乱。

我已经尝试categoryAxis.autoGridCount，但没有运气。

请帮助，提前致谢。

Answer 1

我的分类轴包含日期时遇到了同样的问题。我解决了，这是我的解决方案：最重要的部分是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

我知道这是一个相当古老的问题，但这是我最近遇到的一个问题，我无法在网上找到满意的解决方案。旋转类别标签的问题在于它可以将图表缩小到很多！

我想出的解决方案是使用标签格式器垂直错开类别标签。

我的格式化程序

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
}

Answer 3

autoGridCount应设置为true。根据您的描述，我猜您的轴标签中有很多文字。我建议将categoryHxis的minHorizontalGap增加到100左右（默认值为75）。如果这没有用，我需要看你的图表。

Answer 4

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

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

更多信息：Amcharts documentation for the same

Amcharts类别轴标签重叠

4 个答案: