javascript Amcharts 类别轴标签重叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21701081/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Amcharts category axis labels overlap
提问by Sachin Verma
I am using amCharts javascript charts version 3 and I have also tried the latest version too.
我正在使用 amCharts javascript 图表版本 3，我也尝试过最新版本。
The problem is: I have a lineChart with scrollBar , the categoryAxis of that chart has more than even 100 records so at first rendering it just shows 5-6 and then I zoom to view more categoryAxis label. So far so good.
问题是：我有一个带有 scrollBar 的 lineChart ，该图表的 categoryAxis 甚至有超过 100 条记录，所以在第一次渲染时它只显示 5-6，然后我缩放以查看更多 categoryAxis 标签。到现在为止还挺好。
But when I zoom, the labels on categoryAxis overlaps so everything looks messed up actually its due to the increase in the number of grids after zooming.
但是当我缩放时，categoryAxis 上的标签重叠，因此由于缩放后网格数量的增加，实际上一切看起来都乱七八糟。
I have tried categoryAxis.autoGridCountbut got no luck with it.
我试过了，categoryAxis.autoGridCount但没有运气。
Please help, Thanks in advance.
请帮助，提前致谢。
回答by vanrado
I had the same problem with my Category axis which contains dates. I resolved it and this is my solution: The most important part is that parseDate is set to false
我的包含日期的 Category 轴也有同样的问题。我解决了它，这是我的解决方案：最重要的部分是 parseDate 设置为 false
categoryAxis.parseDates = false;
You have to set categoryAxis.autoGridCount to true because it's important to set number of gridCount automatically, acoarding to the axis size.
您必须将 categoryAxis.autoGridCount 设置为 true，因为根据轴大小自动设置 gridCount 的数量很重要。
categoryAxis.autoGridCount = true;
then
然后
categoryAxis.minHorizontalGap = 100;
That creates space between dates as some guy mentioned.
正如某些人提到的那样，这在日期之间创造了空间。
My usage is:
我的用法是：
//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;
回答by YanisTheYak
I know that this is quite an old question but it is a problem that I have recently encountered and I could not find a satisfactory solution online. The problem with rotating the category labels is that it can shrink the chart to much!
我知道这是一个很老的问题，但这是我最近遇到的一个问题，我在网上找不到令人满意的解决方案。旋转类别标签的问题在于它可以将图表缩小很多！
The solution I came up with was to vertically stagger the category labels using a label formatter.
我想出的解决方案是使用标签格式化程序垂直错开类别标签。
My formatter
我的格式化程序
var up = false;
function formatLabel(value, valueString, axis){
if(up) {
axis.labelOffset=0;
}
else {
axis.labelOffset=25;
}
up=!up;
return value;
}
There is some info about setting up a formatter here
这里有一些关于设置格式化程序的信息
https://amcharts.zendesk.com/entries/23473053-Formatting-axis-labels-using-custom-function
https://amcharts.zendesk.com/entries/23473053-Formatting-axis-labels-using-custom-function
But basically all you have to do is set the labelFunction on the axis
但基本上你所要做的就是在轴上设置 labelFunction
"categoryAxis": {
"labelFunction":formatLabel
}
回答by backslashN
Try using categoryAxis.renderer.minGridDistanceproperty. This will tell the chart to not places labels/grids closer than the said value in pixels. Increasing these numbers will mean likely sparser grid lines and related labels. Decreasing will probably result in denser grid/labels.
尝试使用categoryAxis.renderer.minGridDistance属性。这将告诉图表不要将标签/网格放置在比以像素为单位的所述值更近的位置。增加这些数字意味着网格线和相关标签可能会更稀疏。减少可能会导致更密集的网格/标签。
Example use: categoryAxis.renderer.minGridDistance = 40;
使用示例： categoryAxis.renderer.minGridDistance = 40;
More information: Amcharts documentation for the same
更多信息：相同的 Amcharts 文档
回答by zeroin
The autoGridCount should be set to true. From your description I guess you have quite a lot text in your axis labels. I could recommend increasing minHorizontalGap to 100 or so (default is 75) for your categoryAxis. If this won't help I'd need to see your chart.
autoGridCount 应设置为 true。根据您的描述，我猜您的轴标签中有很多文字。我可以建议将 categoryAxis 的 minHorizontalGap 增加到 100 左右（默认值为 75）。如果这没有帮助，我需要查看您的图表。
