Dynamische Daten push für datumsbasierte Felder

Question

Ich versuche Daten dynamisch in die dataProvider XY-Charts in Amcharts zu schieben, aber das kann ich nicht erreichen.

Mein Diagramm wird nicht gezeichnet. Meine x Achse wäre Monat und die y Achse wäre ein numerischer Wert.

Ich habe versucht, so etwas den ganzen Monat und insgesamt Arrays sind deklariert. Mein obj sieht ungefähr so ​​aus:

dataProviderObj{(date : 2015-Jan , y :80 , value :80),(date : 2015-Feb , y :70 , value :70)}; 
dataProviderObj={}; 

Ich mag dieses

for(i=0;i<=month.length;i++){ 
dataProviderObj.push{(
"date" : month[i], 
"y" : total[i], 
"value" : total[i] 
)} 
} 
dataprovider.push(dataProviderObj); 

var chart = AmCharts.makeChart("chartdiv", { 
    "type": "xy", 
    "theme": "light", 
    "marginRight": 80, 
    "dataDateFormat": "YYYY-MMM", 
    "startDuration": 1.5, 
    "trendLines": [], 
    "balloon": { 
     "adjustBorderColor": false, 
     "shadowAlpha": 0, 
     "fixedPosition":true 
    }, 
    "graphs": [{ 
     "balloonText": "<div style='margin:5px;'><b>[[x]]</b><br>y:<b>[[y]]</b><br>value:<b>[[value]]</b></div>", 
     "bullet": "diamond", 
     "id": "AmGraph-1", 
     "lineAlpha": 0, 
     "lineColor": "#b0de09", 
     "fillAlphas": 0, 
     "valueField": "value", 
     "xField": "date", 
     "yField": "y" 
    }, { 
     "balloonText": "<div style='margin:5px;'><b>[[x]]</b><br>y:<b>[[y]]</b><br>value:<b>[[value]]</b></div>", 
     "bullet": "round", 
     "id": "AmGraph-2", 
     "lineAlpha": 0, 
     "lineColor": "#fcd202", 
     "fillAlphas": 0, 
     "valueField": "bValue", 
     "xField": "date", 
     "yField": "by" 
    }], 
    "valueAxes": [{ 
     "id": "ValueAxis-1", 
     "axisAlpha": 0 
    }, { 
     "id": "ValueAxis-2", 
     "axisAlpha": 0, 
     "position": "bottom", 
     "type": "date", 
     "minimumDate": new Date(2015, 0, 01), 
     "maximumDate": new Date(2015, 12, 13) 
    }], 
    "allLabels": [], 
    "titles": [], 
    "dataProvider": dataprovider, 
    "export": { 
     "enabled": true 
    }, 

    "chartScrollbar": { 
     "offset": 15, 
     "scrollbarHeight": 5 
    }, 

    "chartCursor":{ 
     "pan":true, 
     "cursorAlpha":0, 
     "valueLineAlpha":0 
    } 
}); 

I dynamische Date in x-Achse und dynamischen numerischen Wert in y-Achse mit einem Wert erhalten möchten schieben bin versucht. Bitte helfen Sie mir so ein xy-Diagramm in amCharts zeichnen

Answer 1

Es gibt zwei Probleme -

1) Ihre Logik zum Bestücken der Dataprovider ist nicht richtig. Sie müssen direkt zum Datenprovider-Array in der Schleife wechseln. Die Logik sollte sein:

var dataprovider = []; 
for(i=0;i<=month.length;i++){ 
    dataProvider.push({ 
    "date" : month[i], 
    "y" : total[i], 
    "value" : total[i] 
    }); 
} 

Beachten Sie die Platzierung der Klammern und geschweifte Klammern - Sie rufen die push des Dataprovider-Array Funktion mit den Klammern und Sie drücken ein Objekt ({ ... }), die Ihre Daten in das Array.

2) "MMM" wird in dataDateFormat nicht unterstützt. Wie Sie in AmCharts' formatting dates documentation sehen können, wird jedes Format mit einem Sternchen nicht unterstützt. Ihre Daten/Termine sollten in der resultierenden DataProvider- Array wie folgt aussehen:

dataprovider = [{ 
    "date": "2015-01", 
    "y": 19, 
    "value": 19 
}, 
{ 
    "date": "2015-02", 
    "y": 18, 
    "value": 18 
}, 
    // etc 
] 

Hier ist eine Demo mit korrekt formatierten Daten

//dummy data: 
 
var month = [ "2015-01", "2015-02", "2015-03", "2015-04", "2015-05", "2015-06", "2015-07", "2015-08", "2015-09", "2015-10", "2015-11", "2015-12"]; 
 

 
var total = [ 17, 16, 15, 16, 19, 20, 17, 20, 16, 19, 16, 18 ]; 
 
var dataprovider = []; 
 

 
for(var i=0;i<=month.length;i++){ 
 
    dataprovider.push({ 
 
    "date" : month[i], 
 
    "y" : total[i], 
 
    "value" : total[i] 
 
    }); 
 
} 
 

 

 
var chart = AmCharts.makeChart("chartdiv", { 
 
    "type": "xy", 
 
    "theme": "light", 
 
    "marginRight": 80, 
 
    "dataDateFormat": "YYYY-MM", 
 
    "startDuration": 1.5, 
 
    "trendLines": [], 
 
    "balloon": { 
 
    "adjustBorderColor": false, 
 
    "shadowAlpha": 0, 
 
    "fixedPosition": true 
 
    }, 
 
    "graphs": [{ 
 
    "balloonText": "<div style='margin:5px;'><b>[[x]]</b><br>y:<b>[[y]]</b><br>value:<b>[[value]]</b></div>", 
 
    "bullet": "diamond", 
 
    "id": "AmGraph-1", 
 
    "lineAlpha": 0, 
 
    "lineColor": "#b0de09", 
 
    "fillAlphas": 0, 
 
    "valueField": "value", 
 
    "xField": "date", 
 
    "yField": "y" 
 
    }, { 
 
    "balloonText": "<div style='margin:5px;'><b>[[x]]</b><br>y:<b>[[y]]</b><br>value:<b>[[value]]</b></div>", 
 
    "bullet": "round", 
 
    "id": "AmGraph-2", 
 
    "lineAlpha": 0, 
 
    "lineColor": "#fcd202", 
 
    "fillAlphas": 0, 
 
    "valueField": "bValue", 
 
    "xField": "date", 
 
    "yField": "by" 
 
    }], 
 
    "valueAxes": [{ 
 
    "id": "ValueAxis-1", 
 
    "axisAlpha": 0 
 
    }, { 
 
    "id": "ValueAxis-2", 
 
    "axisAlpha": 0, 
 
    "position": "bottom", 
 
    "type": "date", 
 
    "minimumDate": new Date(2014, 11, 1), 
 
    "maximumDate": new Date(2016, 0, 1) 
 
    }], 
 
    "allLabels": [], 
 
    "titles": [], 
 
    "dataProvider": dataprovider, 
 
    "export": { 
 
    "enabled": true 
 
    }, 
 

 
    "chartScrollbar": { 
 
    "offset": 15, 
 
    "scrollbarHeight": 5 
 
    }, 
 

 
    "chartCursor": { 
 
    "pan": true, 
 
    "cursorAlpha": 0, 
 
    "valueLineAlpha": 0 
 
    } 
 
});

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