amCharts kann Daten nicht anzeigen?

Ich bin neu bei amCharts und Javascript. Meine HTML-Datei wie folgt aussieht:amCharts kann Daten nicht anzeigen?

<!DOCTYPE html> 
<html> 

<head> 
    <link rel="shortcut icon" href=""> 
    <title>chart created with amCharts | amCharts</title> 
    <meta name="description" content="chart created using amCharts live editor" /> 

    <!-- amCharts javascript sources --> 
    <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 src="https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js"></script> 

    <!-- amCharts javascript code --> 
    <script type="text/javascript"> 
     AmCharts.makeChart("chartdiv", { 
      "type": "serial", 
      "dataLoader": { 
       "url": "output.json", 
       "format": "json" 
      }, 
      "valueField": "count", 
      "titleField": "date" 
     }); 
    </script> 
</head> 

<body> 
    <div id="chartdiv" style="width: 100%; height: 400px; background-color: #FFFFFF;"></div> 
</body> 

</html>

Meine JSON-Datei:

[{ 
    "date": "2015-11-17", 
    "count": "1" 
}, { 
    "date": "2015-11-28", 
    "count": "1" 
}, { 
    "date": "2016-01-13", 
    "count": "1" 
}, { 
    "date": "2016-01-22", 
    "count": "1" 
}]

Durch die Verwendung von http-Server -o, Local Host im Chrome-Browser öffnet. http://127.0.0.1:8080/test2.html

test2.html und output.json sind im selben Verzeichnis

ich vom chromeconsole sehen kann, ist es die JSON-Datei korrekt geladen ist.

Ich bin, um herauszufinden, warum nicht in der Lage die Daten nicht in dem Diagramm zeigt nach oben. Ich habe versucht, andere Beispiele zu durchstöbern und zu betrachten, irgendwie festgefahren.

Quelle

2016-12-02 ripudaman flora

In Ihrem Diagramm fehlen ein paar Stücke, die Sie in einer der Linien-/Säulen-Demos auf der amCharts site finden können. Hier ist, was Sie fehlt:

Sie verpassen eine graphs Array. Dies ist für ein serielles Diagramm erforderlich (es sieht so aus, als ob Sie von einem Kreisdiagramm aus gestartet hätten, das völlig anders ist). Jedes Objekt im Array graphs enthält valueField.
In Ihrem Diagramm fehlt eine categoryField.
Es sieht so aus, als ob Ihre Daten Daten enthalten. Erstellen Sie daher und setzen Sie parseDates auf true. Sie sollten auch eine Zeichenfolge in der obersten Ebene Ihrer Diagrammkonfiguration festlegen, damit das Diagramm Ihre Daten konsistent über alle Browser hinweg analysieren kann.

Angenommen, Sie ein Liniendiagramm wollen, hier ist das absolute Minimum makeChart rufen Sie für Ihre Daten benötigen:

AmCharts.makeChart("chartdiv", { 
     "type": "serial", 
     "dataLoader": { 
      "url": "output.json", 
      "format": "json" 
     }, 
     "graphs": [{ 
      "valueField": "count" 
     }], 
     "categoryField": "date", 
     "dataDateFormat": "YYYY-MM-DD", 
     "categoryAxis": { 
      "parseDates": true 
     } 
    });

Demo

Quelle

2016-12-02 19:37:03 xorspark

Danke. Ja, ich begann mit dem Kreisdiagramm und ging dann in das Liniendiagramm: $ –

amCharts kann Daten nicht anzeigen?

Antwort

Verwandte Themen