2017-04-11 2 views
0

In Amcharts Stock chart, ich versuche, Daten anzuzeigen, ich bekomme diese Daten in JSON-Form aus der Datenbank. Der Fehler, der angezeigt wird: "Uncaught TypeError: dp [ds.categoryField] .setFullYear ist keine Funktion bei Object.AmCharts.baseYearInitialize". JSON-Array ist in Ordnung, und auch wenn ich nur ein Dataset behalten, dann funktioniert es gut, sobald ich ein Jahr eingeben, deren Daten ich bereits in JSON-Form habe, zeigt es mir einen Fehler.Uncaught TypeError: dp [ds.categoryField] .setFullYear ist keine Funktion bei Object.AmCharts.baseYearInitialize

var chart; 
 
var SER = []; 
 
//var SER; 
 

 
first(); 
 

 
function first() { 
 
    for (var i = 0; i < 5; i++) { 
 
     generateChartData(2000 + i); 
 
    } 
 
    //SER = JSON.stringify(SER1); 
 
    //console.log(SER1); 
 
    dd(); 
 
} 
 

 
function generateChartData(year) { 
 
    var firstDate = new Date(year, 0, 1); 
 
    var temp = []; 
 
    for (var i = 0; i < 365; i++) { 
 
     var newDate = new Date(firstDate); 
 
     newDate.setDate(newDate.getDate() + i); 
 
     newDate = ((newDate.getMonth() + 1) < 10 ? "0" + (newDate.getMonth() + 1) : (newDate.getMonth() + 1)) + 
 
      "-" + (newDate.getDate() < 10 ? "0" + newDate.getDate() : newDate.getDate()) + 
 
      "-" + year; 
 
     temp.push({ 
 
      date: newDate, 
 
      value: Math.round(Math.random() * (40 + i)) + 100 + i 
 
     }); 
 
    } 
 
    SER.push(temp); 
 
} 
 

 
function dd() { 
 
    AmCharts.addInitHandler(function(chart) { 
 
     AmCharts.baseYearInitialize = function(chart) { 
 
      for (var x = 0; x < chart.dataSets.length; x++) { 
 
       var ds = chart.dataSets[x]; 
 
       if (ds.baseYear !== undefined) { 
 
        for (var i = 0; i < ds.dataProvider.length; i++) { 
 
         var dp = ds.dataProvider[i]; dp[ds.categoryField].setFullYear(ds.baseYear); 
 
        } 
 
       } 
 
      } 
 
     } 
 
     AmCharts.baseYearInitialize(chart); 
 
    }, ["stock"]); 
 
    
 
    chart = AmCharts.makeChart("chartdiv", { 
 
     "type": "stock", 
 
     "theme": "light", 
 
     "dataSets": [{ 
 
      "title": "2000", 
 
      "fieldMappings": [{ 
 
       "fromField": "value", 
 
       "toField": "value" 
 
      }], 
 
      "dataProvider": SER[0], 
 
      "categoryField": "date" 
 
     } 
 
     /* keeping more than one dataset showing error 
 
     , { 
 
      "title": "2001", 
 
      "fieldMappings": [{ 
 
       "fromField": "value", 
 
       "toField": "value" 
 
      }], 
 
      "dataProvider": SER[1], 
 
      "categoryField": "date", 
 
      "compared": true, 
 
      "baseYear": 2000 
 
     }, { 
 
      "title": "2002", 
 
      "fieldMappings": [{ 
 
       "fromField": "value", 
 
       "toField": "value" 
 
      } 
 
     */ 
 
     ], 
 
     "panels": [{ 
 
      "title": "Value", 
 
      "categoryAxis": {}, 
 
      \t "dateFormats": 'DD-MM-YYYY', 
 
      "stockGraphs": [{ 
 
       "id": "g1", 
 
       "valueField": "value", 
 
       "lineThickness": 2, 
 
       "comparable": true, 
 
       "compareField": "value", 
 
       "balloonText": "[[title]]:<b>[[value]]</b>", 
 
       "compareGraphBalloonText": "[[title]]:<b>[[value]]</b>", 
 
       "compareGraph": { 
 
        "dashLength": 5, 
 
        "lineThickness": 2 
 
       } 
 
      }], 
 
      "stockLegend": { 
 
       "periodValueTextComparing": "[[percents.value.close]]%", 
 
       "periodValueTextRegular": "[[value.close]]" 
 
      } 
 
     }], 
 
     "panelsSettings": { 
 
      "recalculateToPercents": "never" 
 
     }, 
 
     "chartScrollbarSettings": { 
 
      "graph": "g1" 
 
     }, 
 
     "chartCursorSettings": { 
 
      "valueBalloonsEnabled": true, 
 
      "fullWidth": true, 
 
      "cursorAlpha": 0.1, 
 
      "valueLineBalloonEnabled": true, 
 
      "valueLineEnabled": true, 
 
      "valueLineAlpha": 0.5 
 
     }, 
 
     "periodSelector": { 
 
      "position": "bottom", 
 
      "periods": [{ 
 
       "period": "MM", 
 
       "selected": true, 
 
       "count": 1, 
 
       "label": "1 month" 
 
      }, { 
 
       "period": "YYYY", 
 
       "count": 1, 
 
       "label": "1 year" 
 
      }, { 
 
       "period": "YTD", 
 
       "label": "YTD" 
 
      }, { 
 
       "period": "MAX", 
 
       "label": "MAX" 
 
      }] 
 
     } 
 

 
    }); 
 
    $('document').ready(function() { 
 
     $('#submit').on('click', function() { 
 
      add(document.getElementById('year').value); 
 
     }); 
 
    }); 
 
} 
 

 
function add(yr) { 
 
    chart.dataSets.push({ 
 
     "title": yr, 
 
     "fieldMappings": [{ 
 
      "fromField": "value", 
 
      "toField": "value" 
 
     }], 
 
     "dataProvider": SER[yr-2000], 
 
     "categoryField": "date", 
 
     "compared": true, 
 
     "baseYear": 2000 
 
    }); 
 
    AmCharts.baseYearInitialize(chart); 
 
    chart.validateData(); 
 
}
#chartdiv { 
 
       width: 100%; 
 
       height: 500px; 
 
       font-family: Verdana; 
 
       font-size: 12px; 
 
      }
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
 
     <script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script> 
 
     <script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script> 
 
     <script type="text/javascript" src="https://www.amcharts.com/lib/3/themes/light.js"></script> 
 
     <script type="text/javascript" src="https://www.amcharts.com/lib/3/amstock.js"></script> 
 
     <input type="text" id="year"><input type="submit" id="submit"> 
 
     <div id="chartdiv"></div>

I Datumsformat als "TT-MM-YYYY" nehme. Warum tritt dieser Fehler auf?

Antwort

0

Das Plugin geht davon aus, dass die Daten bereits Datumsobjekte sind. Da Sie Zeichenfolgedaten verwenden, müssen Sie die Datumsangaben in Datumsobjekte konvertieren, bevor Sie sie zum Datenprovider hinzufügen, oder das Plug-in aktualisieren, um die Zeichenfolgedaten in Datumsobjekte für Sie zu konvertieren.

Wenn Sie ein stringbasiertes Datum verwenden, müssen Sie dataDateFormat festlegen, damit das Diagramm Ihre Daten korrekt analysieren kann. Ihre Zeichenfolge Daten im Datenprovider, die Sie in Ihrer generateChartData Funktion sind zu erzeugen sind tatsächlich in „MM-DD-YYYY“ Format, so dass Sie dataDateFormat: "MM-DD-YYYY" in der obersten Ebene des Diagramms config gesetzt werden sollen:

chart = AmCharts.makeChart("chartdiv", { 
    // ... 
    "dataDateFormat": "MM-DD-YYYY", 
    // ... 
} 

von dort aus sollen Sie das Plugin aktualisieren, um zu überprüfen, ob setFullYear eine Funktion dieses Datenpunktes ist, und es zu einem Date-Objekt zuerst konvertieren, bevor er es auf das Basisjahr mit AmCharts.stringToDate gesetzt:

AmCharts.addInitHandler(function(chart) { 
    AmCharts.baseYearInitialize = function(chart) { 
     for (var x = 0; x < chart.dataSets.length; x++) { 
     var ds = chart.dataSets[x]; 
     if (ds.baseYear !== undefined) { 
      for (var i = 0; i < ds.dataProvider.length; i++) { 
      var dp = ds.dataProvider[i]; 
      // if this is not a date object (i.e. setFullYear is not defined) convert it using AmCharts.stringToDate and your chart's dataDateFormat) 
      if (!dp[ds.categoryField].setFullYear) { 
       dp[ds.categoryField] = AmCharts.stringToDate(dp[ds.categoryField], chart.dataDateFormat); 
      } 
      dp[ds.categoryField].setFullYear(ds.baseYear); 
      } 
     } 
     } 
    } 
    AmCharts.baseYearInitialize(chart); 
    }, ["stock"]); 

I Außerdem haben Sie Ihren Code optimiert, um zu prüfen, ob die Eingabe numerisch und ein gültiges Array-Element ist, bevor Sie es zu dataProvi hinzufügen der:

var chart; 
 
var SER = []; 
 
//var SER; 
 

 
first(); 
 

 
function first() { 
 
    for (var i = 0; i < 5; i++) { 
 
    generateChartData(2000 + i); 
 
    } 
 
    //SER = JSON.stringify(SER1); 
 
    //console.log(SER1); 
 
    dd(); 
 
} 
 

 
function generateChartData(year) { 
 
    var firstDate = new Date(year, 0, 1); 
 
    var temp = []; 
 
    for (var i = 0; i < 365; i++) { 
 
    var newDate = new Date(firstDate); 
 
    newDate.setDate(newDate.getDate() + i); 
 
    newDate = ((newDate.getMonth() + 1) < 10 ? "0" + (newDate.getMonth() + 1) : (newDate.getMonth() + 1)) + 
 
     "-" + (newDate.getDate() < 10 ? "0" + newDate.getDate() : newDate.getDate()) + 
 
     "-" + year; 
 
    temp.push({ 
 
     date: newDate, 
 
     value: Math.round(Math.random() * (40 + i)) + 100 + i 
 
    }); 
 
    } 
 
    SER.push(temp); 
 
} 
 

 
function dd() { 
 
    AmCharts.addInitHandler(function(chart) { 
 
    AmCharts.baseYearInitialize = function(chart) { 
 
     for (var x = 0; x < chart.dataSets.length; x++) { 
 
     var ds = chart.dataSets[x]; 
 
     if (ds.baseYear !== undefined) { 
 
      for (var i = 0; i < ds.dataProvider.length; i++) { 
 
      var dp = ds.dataProvider[i]; 
 
      // if this is not a date object (i.e. setFullYear is not defined) convert it using AmCharts.stringToDate and your chart's dataDateFormat) 
 
      if (!dp[ds.categoryField].setFullYear) { 
 
       dp[ds.categoryField] = AmCharts.stringToDate(dp[ds.categoryField], chart.dataDateFormat); 
 
      } 
 
      dp[ds.categoryField].setFullYear(ds.baseYear); 
 
      } 
 
     } 
 
     } 
 
    } 
 
    AmCharts.baseYearInitialize(chart); 
 
    }, ["stock"]); 
 

 
    chart = AmCharts.makeChart("chartdiv", { 
 
    "type": "stock", 
 
    "theme": "light", 
 
    "dataDateFormat": "MM-DD-YYYY", 
 
    "dataSets": [{ 
 
     "title": "2000", 
 
     "fieldMappings": [{ 
 
      "fromField": "value", 
 
      "toField": "value" 
 
     }], 
 
     "dataProvider": SER[0], 
 
     "categoryField": "date" 
 
     } 
 
     /* keeping more than one dataset showing error 
 
     , { 
 
      "title": "2001", 
 
      "fieldMappings": [{ 
 
       "fromField": "value", 
 
       "toField": "value" 
 
      }], 
 
      "dataProvider": SER[1], 
 
      "categoryField": "date", 
 
      "compared": true, 
 
      "baseYear": 2000 
 
     }, { 
 
      "title": "2002", 
 
      "fieldMappings": [{ 
 
       "fromField": "value", 
 
       "toField": "value" 
 
      } 
 
     */ 
 
    ], 
 
    "panels": [{ 
 
     "title": "Value", 
 
     "categoryAxis": {}, 
 
     "dateFormats": 'DD-MM-YYYY', 
 
     "stockGraphs": [{ 
 
     "id": "g1", 
 
     "valueField": "value", 
 
     "lineThickness": 2, 
 
     "comparable": true, 
 
     "compareField": "value", 
 
     "balloonText": "[[title]]:<b>[[value]]</b>", 
 
     "compareGraphBalloonText": "[[title]]:<b>[[value]]</b>", 
 
     "compareGraph": { 
 
      "dashLength": 5, 
 
      "lineThickness": 2 
 
     } 
 
     }], 
 
     "stockLegend": { 
 
     "periodValueTextComparing": "[[percents.value.close]]%", 
 
     "periodValueTextRegular": "[[value.close]]" 
 
     } 
 
    }], 
 
    "panelsSettings": { 
 
     "recalculateToPercents": "never" 
 
    }, 
 
    "chartScrollbarSettings": { 
 
     "graph": "g1" 
 
    }, 
 
    "chartCursorSettings": { 
 
     "valueBalloonsEnabled": true, 
 
     "fullWidth": true, 
 
     "cursorAlpha": 0.1, 
 
     "valueLineBalloonEnabled": true, 
 
     "valueLineEnabled": true, 
 
     "valueLineAlpha": 0.5 
 
    }, 
 
    "periodSelector": { 
 
     "position": "bottom", 
 
     "periods": [{ 
 
     "period": "MM", 
 
     "selected": true, 
 
     "count": 1, 
 
     "label": "1 month" 
 
     }, { 
 
     "period": "YYYY", 
 
     "count": 1, 
 
     "label": "1 year" 
 
     }, { 
 
     "period": "YTD", 
 
     "label": "YTD" 
 
     }, { 
 
     "period": "MAX", 
 
     "label": "MAX" 
 
     }] 
 
    } 
 

 
    }); 
 
    $('document').ready(function() { 
 
    $('#submit').on('click', function() { 
 
     add(+document.getElementById('year').value); 
 
    }); 
 
    }); 
 
} 
 

 
function add(yr) { 
 
    if (!isNaN(yr) && SER[yr - 2000] !== undefined) { 
 
    chart.dataSets.push({ 
 
     "title": yr, 
 
     "fieldMappings": [{ 
 
     "fromField": "value", 
 
     "toField": "value" 
 
     }], 
 
     "dataProvider": SER[yr - 2000], 
 
     "categoryField": "date", 
 
     "compared": true, 
 
     "baseYear": 2000 
 
    }); 
 
    AmCharts.baseYearInitialize(chart); 
 
    chart.validateData(); 
 
    } 
 
}
#chartdiv { 
 
    width: 100%; 
 
    height: 500px; 
 
    font-family: Verdana; 
 
    font-size: 12px; 
 
}
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
 
<script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script> 
 
<script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script> 
 
<script type="text/javascript" src="https://www.amcharts.com/lib/3/themes/light.js"></script> 
 
<script type="text/javascript" src="https://www.amcharts.com/lib/3/amstock.js"></script> 
 
<input type="text" id="year"><input type="submit" id="submit"> 
 
<div id="chartdiv"></div>

+0

Jetzt bin immer ich diesen Fehler Uncaught Typeerror: im Objekt: Kann Eigenschaft 'indexOf' undefinierter bei Object.d.stringToDate (55 amcharts.js) nicht lesen .AmCharts.baseYearInitialize (try_2.jsp: 98) bei objekt.methode (try_2.jsp: 105) bei Object.d.callInitHandler (amcharts.js: 1) bei b.afterWrite (amstock.js: 1) bei b.write (amstock.js: 1) bei Object.d.makeChart (amcharts.js: 1) bei makechart (try_2.jsp: 108) bei Object.success (try_2.jsp: 44) bei i (jquery.min.js: 2) –

+0

Post eine Geige von dem, was Sie haben. Der Code, den ich zur Verfügung gestellt habe, funktioniert für mich. Haben Sie die Eigenschaft 'dataDateFormat' wie den Code in meiner Antwort festgelegt? – xorspark

+0

Vielen Dank für Ihre wertvolle Antwort. Ich habe etwas übersehen. Ich habe nicht überprüft, ob das Jahr gültig ist oder nicht, welches hinzugefügt werden soll. Und auch das dataDateFormat entfernt, ich habe das Datum als Datum Objekt und es funktioniert gut. Was du mir gegeben hast, ist richtig. Danke noch einmal.. –

Verwandte Themen