2016-11-07 5 views
0

У меня есть некоторые проблемы с отображением данных через amcharts, когда свойство «minPeriod» равно «WW».Отображение данных в неделю AmCharts

Мои codepen примеры:

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).

Как вы можете видеть, все ярлыки последней ссылки выровнены влево, и это делает мою диаграмму довольно уродливой. Я думаю, что это происходит из-за отключения между реальными значениями и ожидаемого по категориям. Может быть, есть свойство исправить это, но я не мог его найти.

Если у вас возникли те же проблемы и у меня есть некоторые советы, пожалуйста, помогите.

ответ

1

Вы можете установить centerLabels в true в вашей категорииAxis, чтобы заставить метки быть центрированными.

Updated codepen

+0

Спасибо, именно то, что я хотел! – user3476013

Смежные вопросы