2017-03-14 2 views
0

Ich versuche, Amcharts mit Daten von Node JS zu verwenden. Ich versuche, ein JSON als Teil der Antwort von Node-Server-Fliege an die Client-Seite zu übergeben, die ich Feed-Amcharts verwenden konnte, um ein Kreisdiagramm zu erstellen. Der Code ist wie unten -Verwenden von Amcharts mit NodeJS-Daten

app.js

var express = require('express'); 
var path = require('path'); 
var app = express(); 
var port = process.env.PORT || 5000; 

var delivCount = require('./serv_delivered.js'); 
var serv_ontime = require('./serv_ontime.js'); 
var delayedCount = require('./serv_delayed.js'); 
var crtidelayedCount = require('./serv_crit_delayed.js'); 
var chartData = [{ 
     "country": "Czech", 
     "litres": 301.9 
    }, { 
     "country": "Ireland", 
     "litres": 201.1 
    }, { 
     "country": "Germany", 
     "litres": 165.8 
    }, { 
     "country": "Pak", 
     "litres": 139.9 
    }, { 
     "country": "Austria", 
     "litres": 128.3 
    }, { 
     "country": "UK", 
     "litres": 99 
    }] ; 

app.use(express.static(path.join(__dirname, 'public'))); 
app.set('views', __dirname + '/src/views'); 

var bookRouter= express.Router(); 
app.set('view engine','ejs'); 

app.get('/',function(req,res){ 
      delivCount(function(error, res_deliv){ 
       serv_ontime(function(error, res_ontime){ 
        delayedCount(function(error, res_delayed){ 
         crtidelayedCount(function(error, res_cdelayed){ 
          res.render('index', {title: "Hellow From Render", 
            res: [res_deliv,res_ontime,res_delayed,res_cdelayed,chartData] 
           }); 
         }); 
        }); 
       }); 
      }); 
    }); 
app.listen(port,function(err){ 
    console.log('running server on port'+ port); 
}); 

amchart5.js

var chart = AmCharts.makeChart("pie1", { 
    "type": "pie", 
    "theme": "light", 
    "dataProvider": [{ 
     "country": "Czech", 
     "litres": 301.9 
    }, { 
     "country": "Ireland", 
     "litres": 201.1 
    }, { 
     "country": "Germany", 
     "litres": 165.8 
    }, { 
     "country": "Pak", 
     "litres": 139.9 
    }, { 
     "country": "Austria", 
     "litres": 128.3 
    }, { 
     "country": "UK", 
     "litres": 99 
    }], 
    "valueField": "litres", 
    "titleField": "country", 
    "balloon": { 
     "fixedPosition": true 
    }, 
    "export": { 
     "enabled": true 
    } 
}); 

Kann mir jemand helfen, die Chartdata verwenden, die ich von App schicke. js, um ein Kreisdiagramm zu erstellen?

Hinzufügen Screenshot korrekten Daten Validierung -

Data

Antwort

1

wenn Ihr Server die richtigen Werte zurückgegeben werden, und Sie verwenden eine externe js Datei, könnten Sie etwas tun.

function createChart(chartData){ 
    var chart = AmCharts.makeChart("pie1", { 
     "type": "pie", 
     "theme": "light", 
     "dataProvider": chartData, 
     "valueField": "litres", 
     "titleField": "country", 
     "balloon": { 
      "fixedPosition": true 
     }, 
     "export": { 
      "enabled": true 
     } 
    }); 
} 

und rufen dann die Funktion von ejs

<script> 
    createChart(<%- res[4] %>); 
</script> 

Datei, wie Sie Ihre res als Array und Ihre Kartendaten auf dem Index 4 deklarieren ist, sollte diese Arbeit. ps: vielleicht müssen Sie JSON.stringify in Ihrem Array verwenden und achten Sie auf die Reihenfolge der Skripte.

+0

Ich nehme an, Sie meinten <%= res[4]%>, aber das funktioniert nicht. Wahrscheinlich, weil die <% %> Konvention, die wir verwenden, für .ejs Art von Dateien ist. Ich denke nicht, dass wir es direkt in unseren js-Dateien verwenden können. – Dalton2

+0

wenn ich mich nicht irre ... beide '-' /' = 'funktioniert ... aber ja, ich habe nicht darauf geachtet, dass Sie in .js-Datei verwenden. Sie könnten eine Funktion erstellen, die chartData empfängt und diese Funktion von ejs aufruft ... Ich werde meine Antwort mit meinem Vorschlag aktualisieren –

+0

Ich habe genau so verwendet. Debugging auch um zu überprüfen, ob die js-Datei ausgeführt wird oder nicht, es ist aber immer noch Diagramm wird nicht gerendert. Ich habe den Screenshot hinzugefügt, um zu zeigen, dass die Daten korrekt empfangen wurden. – Dalton2

Verwandte Themen