AmCharts 系列图表：在轴点下居中对齐标签

Question

在这个 AmCharts 序列图（折线图）中，当折线图被渲染时，类别轴中的标签从数据点交点右对齐。

我需要将这些标签居中对齐，刚好低于数据点的交点比例。

这是当前的源代码：

 chart = AmCharts.makeChart(id, {
        "type": "serial",
        "autoMarginOffset": 20,
        "usePrefixes":true,
        "prefixesOfBigNumbers":[
            {"number":1e+3,"prefix":"k"},
            {"number":1e+6,"prefix":"M"},
            {"number":1e+9,"prefix":"G"},
            {"number":1e+12,"prefix":"T"},
            {"number":1e+15,"prefix":"P"},
            {"number":1e+18,"prefix":"E"},
            {"number":1e+21,"prefix":"Z"},
            {"number":1e+24,"prefix":"Y"}
        ],
        "valueAxes": [{
            "id": "v1",
            "position": "left",
            "ignoreAxisWidth":false
        }],
        "balloon": {
            "borderThickness": 1,
            "shadowAlpha": 0,
        },
        "graphs": [{
            "id": "g1",
            "fillColors":color,
            "lineColor": color,
            "bullet": "round",
            "bulletBorderAlpha": 1,
            "bulletColor": "#FFFFFF",
            "fillColors": color,
            "bulletSize": 5,
            "hideBulletsCount": 50,
            "lineThickness": 2,
            "title": "red line",
            "useLineColorForBulletBorder": true,
            "valueField": "column-2"
        }],
        "chartCursor": {
            "valueLineEnabled": true,
            "valueLineBalloonEnabled": true,
            "cursorAlpha": 0,
            "valueLineAlpha": 0.5,
            "categoryBalloonDateFormat": 'JJ-NN'
        },
        "categoryField": "column-1",
        "categoryAxis": {
            "gridPosition": "start",
            "parseDates": true,
            "dashLength": 1,
            "minorGridEnabled": false,
            "minPeriod": "mm",
            "gridPosition":'middle',
            "centerLabels":true,
            "equalSpacing":false
        },
        "dataProvider": dataValue,
        "export": {
            "enabled": true
         },
         "allLabels": [{
            "text": timeperiod,
            "align": "center",
            "y":0
        }]
});

这是渲染图：

如何解决这个问题？

Answer 1

要在解析日期时使标签直接位于刻度下方的中心，您必须将equalSpacing 设置为true。

var color = "#112233";
var timeperiod = "test";
var dataValue = generateData();
var chart = AmCharts.makeChart("chartdiv", {
        "type": "serial",
        "autoMarginOffset": 20,
        "usePrefixes":true,
        "prefixesOfBigNumbers":[
            {"number":1e+3,"prefix":"k"},
            {"number":1e+6,"prefix":"M"},
            {"number":1e+9,"prefix":"G"},
            {"number":1e+12,"prefix":"T"},
            {"number":1e+15,"prefix":"P"},
            {"number":1e+18,"prefix":"E"},
            {"number":1e+21,"prefix":"Z"},
            {"number":1e+24,"prefix":"Y"}
        ],
        "valueAxes": [{
            "id": "v1",
            "position": "left",
            "ignoreAxisWidth":false
        }],
        "balloon": {
            "borderThickness": 1,
            "shadowAlpha": 0,
        },
        "graphs": [{
            "id": "g1",
            "fillColors":color,
            "lineColor": color,
            "bullet": "round",
            "bulletBorderAlpha": 1,
            "bulletColor": "#FFFFFF",
            "fillColors": color,
            "bulletSize": 5,
            "hideBulletsCount": 50,
            "lineThickness": 2,
            "title": "red line",
            "useLineColorForBulletBorder": true,
            "valueField": "column-2"
        }],
        "chartCursor": {
            "valueLineEnabled": true,
            "valueLineBalloonEnabled": true,
            "cursorAlpha": 0,
            "valueLineAlpha": 0.5,
            "categoryBalloonDateFormat": 'JJ-NN'
        },
        "categoryField": "column-1",
        "categoryAxis": {
            //"gridPosition": "start", does not work with parseDates
            "parseDates": true,
            "dashLength": 1,
            "minorGridEnabled": false,
            "minPeriod": "mm",
            "gridPosition":'middle',
            //"centerLabelOnFullPeriod":false, //alternate solution but won't center directly under the axis tick
            "equalSpacing":true
        },
        "dataProvider": dataValue,
        "export": {
            "enabled": true
         },
         "allLabels": [{
            "text": timeperiod,
            "align": "center",
            "y":0
        }]
});

function generateData() {
  var data = [];
  var firstDate = new Date();
  firstDate.setHours(0,0,0,0);
  
  for (var i = 0; i < 10; ++i) {
    var newDate = new Date(firstDate);
    newDate.setMinutes(i);
    data.push({
      "column-1": newDate,
      "column-2": Math.floor(Math.random() * 20 + 1)
    });
  }
  
  return data;
}

<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="width: 100%; height: 300px;"></div>

如果您不想使用equalSpacing，也可以使用centerLabelOnFullPeriod，但它只会将其稍微定位在刻度线的右侧，而不是完全位于中心。