AmCharts每周数据显示

Question

i have some troubles with displaying data via amcharts when "minPeriod" property is equal to "WW".

My codepen examples:

var data = [];
var date = new Date();

for (var i = 0; i< 10;i++){
data.push({
    calcDate: moment(new Date()).startOf('day').add(i, 'days').toDate(), 
value: Math.random(100)});}

var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"startDuration": 0,
"categoryField": "calcDate",
"theme": "light",
"marginRight": 70,
"autoMarginOffset": 20,
"dataProvider": data,
"graphs": [{
        "type": "column",
        "fillAlphas": 1,
    "balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]] C</span></b>",
    "lineColor": "#b6d278",
    "valueField": "value"
}],
"chartCursor": {
    "cursorAlpha": 0.1,
    "cursorColor": "#000000",
},
"categoryAxis": {
    "minPeriod": "DD",
    "parseDates": true,
    "minorGridEnabled": true
},
"export": {
    "enabled": true
}});

Days example (how it must look)

var data = [];
var date = new Date();

for (var i = 0; i< 10;i++){
data.push({
    calcDate: moment(new Date()).startOf('day').add(7*i, 'days').toDate(), 
value: Math.random(100)});}

var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"startDuration": 0,
"categoryField": "calcDate",
"theme": "light",
"marginRight": 70,
"autoMarginOffset": 20,
"dataProvider": data,
"graphs": [{
        "type": "column",
        "fillAlphas": 1,
    "balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]] C</span></b>",
    "lineColor": "#b6d278",
    "valueField": "value"
}],
"chartCursor": {
    "cursorAlpha": 0.1,
    "cursorColor": "#000000",
},
"categoryAxis": {
    "minPeriod": "WW",
    "parseDates": true,
    "minorGridEnabled": true
},
"export": {
    "enabled": true
}
});

Week example (broken) .

As you can see, all the last link's labels are aligned to the left and it makes my chart pretty ugly. I think it's happening because of the disconnecting between real values and expected by categoryAxis. Maybe there's a property to fix it, but i could'n find it.

If you've faced the same problem and have some advices to me, please help.

Answer 1

You can set centerLabels to true in your categoryAxis to force the labels to be centered.

Updated codepen