amCharts группа по дате

Question

Я использую amCharts, но мне нужно результаты группы данных по дате: Demo example

У меня есть 5 посещений на один день и график потребности в результатах группы.

Мой код:

var chart = AmCharts.makeChart("chartdiv", { 
    "type": "serial", 
    "theme": "light", 
    "marginRight": 40, 
    "marginLeft": 40, 
    "autoMarginOffset": 20, 
    "mouseWheelZoomEnabled":true, 
    "dataDateFormat": "YYYY-MM-DD", 
    "valueAxes": [{ 
     "id": "v1", 
     "axisAlpha": 0, 
     "position": "left", 
     "ignoreAxisWidth":true 
    }], 
    "balloon": { 
     "borderThickness": 1, 
     "shadowAlpha": 0 
    }, 
    "graphs": [{ 
     "id": "g1", 
     "balloon":{ 
      "drop":true, 
      "adjustBorderColor":false, 
      "color":"#ffffff" 
     }, 
     "bullet": "round", 
     "bulletBorderAlpha": 1, 
     "bulletColor": "#FFFFFF", 
     "bulletSize": 5, 
     "hideBulletsCount": 50, 
     "lineThickness": 2, 
     "title": "red line", 
     "useLineColorForBulletBorder": true, 
     "valueField": "value", 
     "balloonText": "<span style='font-size:18px;'>[[value]]</span>" 
    }], 
    "chartScrollbar": { 
     "graph": "g1", 
     "oppositeAxis":false, 
     "offset":30, 
     "scrollbarHeight": 80, 
     "backgroundAlpha": 0, 
     "selectedBackgroundAlpha": 0.1, 
     "selectedBackgroundColor": "#888888", 
     "graphFillAlpha": 0, 
     "graphLineAlpha": 0.5, 
     "selectedGraphFillAlpha": 0, 
     "selectedGraphLineAlpha": 1, 
     "autoGridCount":true, 
     "color":"#AAAAAA" 
    }, 
    "categoryAxesSettings": { 
     "maxSeries": 1, 
     "groupToPeriods": ["DD"] 
    }, 

    "chartCursor": { 
     "pan": true, 
     "valueLineEnabled": true, 
     "valueLineBalloonEnabled": true, 
     "cursorAlpha":1, 
     "cursorColor":"#258cbb", 
     "limitToGraph":"g1", 
     "valueLineAlpha":0.2, 
     "valueZoomable":true 
    }, 
    "valueScrollbar":{ 
     "oppositeAxis":false, 
     "offset":50, 
     "scrollbarHeight":10 
    }, 
    "categoryField": "date", 
    "categoryAxis": { 
     "parseDates": true, 
     "dashLength": 1, 
     "minorGridEnabled": true 
    }, 
    "export": { 
     "enabled": true 
    }, 
    "dataProvider": [ 
             { 

       "date": "2016-12-01", 
       "value": 1 
      }, 
          { 

       "date": "2016-12-01", 
       "value": 1 
      }, 
          { 

       "date": "2016-12-01", 
       "value": 1 
      }, 
          { 

       "date": "2016-12-01", 
       "value": 1 
      }, 
          { 

       "date": "2016-12-01", 
       "value": 1 
      }, 



    ] 
}); 

chart.addListener("rendered", zoomChart); 

zoomChart(); 


function zoomChart() { 
    chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1); 
} 

По документации Я использую группировки параметров без успеха.

"categoryAxesSettings": { 
     "maxSeries": 1, 
     "groupToPeriods": ["DD"] 
    }, 

Любая помощь?

Answer 1

В соответствии с документацией, categoryAxesSettings применим только к товарам диаграмм типов. Вы используете серийный здесь. Альтернативным вариантом является перевести данные себя:

function translateData(data){ 
 
    var newData = [], dates = []; 
 
    data.map(function(item){ 
 
    var index = dates.indexOf(item.date); 
 
    if(index > -1){ 
 
     newData[index].value += item.value; 
 
    }else{ 
 
     newData.push(item); 
 
     dates.push(item.date); 
 
    } 
 
    }); 
 
    return newData; 
 
} 
 
var chart = AmCharts.makeChart("chartdiv", { 
 
    "type": "serial", 
 
    "theme": "light", 
 
    "marginRight": 40, 
 
    "marginLeft": 40, 
 
    "autoMarginOffset": 20, 
 
    "mouseWheelZoomEnabled":true, 
 
    "dataDateFormat": "YYYY-MM-DD", 
 
    "valueAxes": [{ 
 
     "id": "v1", 
 
     "axisAlpha": 0, 
 
     "position": "left", 
 
     "ignoreAxisWidth":true 
 
    }], 
 
    "balloon": { 
 
     "borderThickness": 1, 
 
     "shadowAlpha": 0 
 
    }, 
 
    "graphs": [{ 
 
     "id": "g1", 
 
     "balloon":{ 
 
      "drop":true, 
 
      "adjustBorderColor":false, 
 
      "color":"#ffffff" 
 
     }, 
 
     "bullet": "round", 
 
     "bulletBorderAlpha": 1, 
 
     "bulletColor": "#FFFFFF", 
 
     "bulletSize": 5, 
 
     "hideBulletsCount": 50, 
 
     "lineThickness": 2, 
 
     "title": "red line", 
 
     "useLineColorForBulletBorder": true, 
 
     "valueField": "value", 
 
     "balloonText": "<span style='font-size:18px;'>[[value]]</span>" 
 
    }], 
 
    "chartScrollbar": { 
 
     "graph": "g1", 
 
     "oppositeAxis":false, 
 
     "offset":30, 
 
     "scrollbarHeight": 80, 
 
     "backgroundAlpha": 0, 
 
     "selectedBackgroundAlpha": 0.1, 
 
     "selectedBackgroundColor": "#888888", 
 
     "graphFillAlpha": 0, 
 
     "graphLineAlpha": 0.5, 
 
     "selectedGraphFillAlpha": 0, 
 
     "selectedGraphLineAlpha": 1, 
 
     "autoGridCount":true, 
 
     "color":"#AAAAAA" 
 
    }, 
 
    "categoryAxesSettings": { 
 
     "maxSeries": 1, 
 
     "groupToPeriods": ["DD"] 
 
    }, 
 

 
    "chartCursor": { 
 
     "pan": true, 
 
     "valueLineEnabled": true, 
 
     "valueLineBalloonEnabled": true, 
 
     "cursorAlpha":1, 
 
     "cursorColor":"#258cbb", 
 
     "limitToGraph":"g1", 
 
     "valueLineAlpha":0.2, 
 
     "valueZoomable":true 
 
    }, 
 
    "valueScrollbar":{ 
 
     "oppositeAxis":false, 
 
     "offset":50, 
 
     "scrollbarHeight":10 
 
    }, 
 
    "categoryField": "date", 
 
    "categoryAxis": { 
 
     "parseDates": true, 
 
     "dashLength": 1, 
 
     "minorGridEnabled": true 
 
    }, 
 
    "export": { 
 
     "enabled": true 
 
    }, 
 
    "dataProvider": translateData([ 
 
      { 
 

 
       "date": "2016-12-01", 
 
       "value": 1 
 
      }, 
 
          { 
 

 
       "date": "2016-12-01", 
 
       "value": 1 
 
      }, 
 
          { 
 

 
       "date": "2016-12-01", 
 
       "value": 1 
 
      }, 
 
          { 
 

 
       "date": "2016-12-01", 
 
       "value": 1 
 
      }, 
 
          { 
 

 
       "date": "2016-12-01", 
 
       "value": 1 
 
      } 
 
    ]) 
 
}); 
 

 
chart.addListener("rendered", zoomChart); 
 

 
zoomChart(); 
 

 
function zoomChart() { 
 
    chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1); 
 
}

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/serial.js"></script> 
 
<div id="chartdiv" style="height: 300px;"></div>