Verwendung von JSON in amcharts - so ändern Sie eine JSON-Ausgabe (Ruby on Rails)

Ich versuche, mit amcharts und ich möchte JSON verwenden, formatieren Sie die Daten für mein Diagramm. Es scheint jedoch, dass die syntax, die amcharts akzeptiert ist kein gültiges JSON.

Hier ist der javascript-code für die Daten, die für eine Feste amchart Diagramm:

 var chartData = [{
            country: "Czech Republic",
            litres: 301.90
        }];

Hier ist der code, wenn ich will erstellen Sie die gleiche Grafik mit embedded ruby:

Controller

 @chart_data = [{"country": "Czech Republic", "litres": 301.90}]

Ansicht

 var chartData = <%= @chart_data.to_json %>;

Den gültiges JSON Ausgabe:

 [{"country": "Czech Republic", "litres": 301.90}]

Jedoch, was amcharts akzeptiert ist:

 [{country: "Czech Republic", litres: 301.90}]

Daher meine Grafik funktioniert nicht, weil amcharts nicht akzeptiert gültiges JSON. So ist es ein Weg, um "ungültige" JSON ohne die Anführungszeichen rund um Land und Liter? Oder gibt es einen besseren Weg, um die Daten in der form amcharts akzeptiert? Jegliche Hilfe würde sehr geschätzt werden.

Hier ist der vollständige javascript:

 <script type="text/javascript">
        var chart;
        var legend;

        var chartData = [{
            country: "Czech Republic",
            litres: 301.90
        }, {
            country: "Ireland",
            litres: 201.10
        }, {
            country: "Germany",
            litres: 165.80
        }, {
            country: "Australia",
            litres: 139.90
        }, {
            country: "Austria",
            litres: 128.30
        }, {
            country: "UK",
            litres: 99.00
        }, {
            country: "Belgium",
            litres: 60.00
        }];

        AmCharts.ready(function () {
            // PIE CHART
            chart = new AmCharts.AmPieChart();
            chart.dataProvider = chartData;
            chart.titleField = "country";
            chart.valueField = "litres";
            chart.outlineColor = "#FFFFFF";
            chart.outlineAlpha = 0.8;
            chart.outlineThickness = 2;

            // WRITE
            chart.write("chartdiv");
        });
    </script>

Können Sie ein Beispiel geben, den Anruf, den Sie machen, zu amcharts?
Hallo Joe, ich fügte hinzu, ein Beispiel für den vollständigen javascript-oben. Zusammen mit, dass, der einzige andere Teil, einschließlich der amcharts.js die Datei kann heruntergeladen werden von Ihrer website. Ich hoffe, dass ist was du meintest. Wenn nicht, lass es mich wissen.
In dem Beispiel, das Sie geben, amCharts nicht Lesen der JSON -, sondern der browser die JS-engine hat, dann code übergibt das resultierende Objekt zu amCharts. Aber jeder browser sollte in der Lage Parsen richtige JSON. Was ist hier wirklich passiert?

InformationsquelleAutor diasks2 | 2012-04-02

1

Ich vielleicht fehlt den Punkt hier, aber wenn Sie nicht mit @chart_data überall sonst könnten Sie bauen die nur pseudo-json-Zeichenfolge mit Daten in der Steuerung und entfernen Sie die .to_json nennen Sie in Ihrer Ansicht:

Controller:
```
@chart_data = "[{country: \"Czech Republic\", litres: 301.90}]" #build this string dynamically
```
Anzeigen:
```
var chartData = <%= @chart_data %>;
```
Wenn Sie mit @chart_data anderswo könnte man auch ein @formatted_chart_data

Möchten Sie ajax verwenden, um den Mehraufwand zu verringern, wenn das Diagramm nicht angezeigt, können Sie eine Aktion hinzufügen, die nichts tut, aber die Rückkehr Ihrer chart-Daten und rufen Sie es von Ihrem js:

Controller:
```
def get_formatted_chart_data
  chart_data = "[{country: \"Czech Republic\", litres: 301.90}]"
  render :text => chart_data
end
```
Oder ist es dynamisch Gebäude der string, das ist der harte Teil?
- Dank Mishaux, das ist sehr hilfreich und hat mir eine Menge, mit zu arbeiten. Ich denke, dass dynamisch Gebäude der string ist der schwierige Teil, aber deine Antwort hat sehr geholfen, mich zu beginnen, in die richtige Richtung. Danke!
- Hier ist ein tutorial zu Fuß durch die amcharts Diagramm zu ziehen, in die Daten aus der Datenbank.
InformationsquelleAutor Mishaux
0

Von amCharts: "amCharts bietet keine direkte Unterstützung für JSON. Es ist nicht das laden externer Daten-Dateien oder so etwas. Es verwendet einfach die native JavaScript-Datenobjekte. Es ist also wirklich bis auf die browser der JS-parser, was das format der Daten kann oder kann nicht Lesen."

http://www.amcharts.com/forum/viewtopic.php?id=7049

Ich nehme an, Sie haben mehr als ein chart und bauen benutzerdefinierte string-Formatierer für jeden ist vielleicht etwas umständlich im Vergleich zur einfachen Verwendung von Standard-json-oder RABL-Formate.

Was Sie können auch tun, ist die Schaffung einer gemeinsamen javascript-Funktion und ein wenig RegEx zum filtern der JSON zu einem amCharts-freundliches format.und
```
function CleanJSONForAMCharts(json) {
    return json.replace(/"(\w+)"\s*:/g, '$1:');
}
```
Dies ist jetzt noch natürlich ein string jetzt und nicht das array-Objekt amCharts erwartet. Eval() muss aufgerufen werden, auf der zurückgegebenen Zeichenfolge, bevor es übergeben werden kann, um dataProvider.
```
//sample data that would have been returned from a RESTful service or another JSON returning method
var chartData = CleanJSONForAMCharts("[{\"title\":\"sample 1\",\"value\":130},{\"title\":\"sample 2\",\"value\":26}]");

var chart = new AmCharts.AmSerialChart();
chart.categoryField = "title";
chart.dataProvider = eval(chartData);

var graph = new AmCharts.AmGraph();
graph.valueField = "value";
graph.type = "column";
graph.fillAlphas = 1;
chart.addGraph(graph);

chart.write("chartdiv");
```
InformationsquelleAutor catalpa

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.