2017-09-30 3 views
0

Ich kann nicht eine Variable in die Highcharts-Funktion mit jquery und Mops übergeben, die ich brauche, um Daten in Reihe zu setzen. Ich habe eine Funktion getData in meiner index.js Datei aufgerufen, die Informationen in folgendem Format ausgibtIch kann eine Variable nicht in die Highcharts-Funktion mit jQuery und Mops übergeben.

{ ‚Gesundheit und Soziales‘: 1.788.131, ‚HUMAN RESOURCES‘: 107285, ‚Bauamt‘: 228.969 , 'DEPARTMENT OF FINANCE': 27500, 'kulturelle Dienstleistungen': 23600, 'MARIN COUNTY PARK': 28380, 'MARIN COUNTY FIRE': 9600, 'MARIN COUNTY FREE BIBLIOTHEK': 2672, PROBATION: 0 , 'LANDWIRTSCHAFT GEWICHTE MESSUNGEN': 20000}

Ich dann das Objekt einer Variablen zuweisen und dann drücken es in ein Array. Mein Problem ist der Zugriff auf die Variable data_output2, wenn ich sie in die Funktion übergebe. Ich weiß nicht viel Javascript, also ist das wirklich ein Hack-Job. Jede Hilfe würde wirklich geschätzt werden!

index.pug Datei

doctype html 
html 
    head 
    title= title 
    link(rel='stylesheet', href='/stylesheets/style.css') 
    script(src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js") 
    script(src = "/highcharts/highcharts.js") 
    script (src="/js/themes/gray.js") 
    script(src = "https://code.highcharts.com/highcharts.js") 
    body 
    div#container(style="width: 950px; height: 400px; margin: 0 auto") 
     script. 
      $(document).ready(function(data_output2) { 
      var chart = { 
       type: 'column' 
      }; 
      var title = { 
       text: "monthly spend by department" 
      }; 
      var subtitle = { 
       text: 'Source: Bouquet.inc!' 
      }; 
      var xAxis = { 
       type: 'category', 
       labels: { 
        rotation: -45, 
        style: { 
         fontSize: '13px', 
         fontFamily: 'Verdana, sans-serif' 
        } 
       } 
      }; 
      var yAxis = { 
       min: 0, 
       title: { 
        text: 'Spend (thousands)'   
       }  
      }; 
      var tooltip = { 
       headerFormat: '<span style = "font-size:10px">{point.key}</span><table>', 
       pointFormat: '<tr><td style = "color:{series.color};padding:0">{series.name}: </td>' + 
        '<td style = "padding:0"><b>{point.y:.1f} mm</b></td></tr>', 
       footerFormat: '</table>', 
       shared: true, 
       useHTML: true 
      }; 
      var plotOptions = { 
       column: { 
        pointPadding: 0.2, 
        borderWidth: 0 
       } 
      }; 
      var credits = { 
       enabled: false 
      }; 
      var series = [{ 
       name: 'Population', 
       data: data_output2 
      }]; 

      var json = {}; 
      json.chart = chart; 
      json.title = title; 
      json.subtitle = subtitle; 
      json.tooltip = tooltip; 
      json.xAxis = xAxis; 
      json.yAxis = yAxis; 
      json.series = series; 
      json.plotOptions = plotOptions; 
      json.credits = credits; 
      $('#container').highcharts(json); 
     }); 
    block content 
    title Delivered Leads 
    title= title 
    body 
    h1= message 
    p= message2 
    h2= 'JSON DATA' 
     each val, index in data_output 
     li= index + ': ' + val 

index.js

app.get('/', function (req, res) { 
    var responseText = 'Hello You Crazy World!<br>' 
    responseText += '<small>Requested at: ' + req.requestTime + '</small>' 

    // res.send(responseText) 
    request.get({ 
    url: url, 
    json: true, 
    headers: {'User-Agent': 'request'} 
    }, (err, res2, data) => { 
     if (err) { 
      console.log('Error:', err); 
     } else if (res2.statusCode !== 200) { 
      console.log('Status:', res2.statusCode); 
     } else { 
      // data is already parsed as JSON: 
     } 
     //do the calculation to return sum value of one department with one time 

     var data_output = getData(data,6, 2016); 
     var array = []; 
     array.push(data_output); 
     console.log(data_output); 
     console.log(array); 

     //uses the templating engine pug to display information 
     res.render('index', { title: 'Hey', message: 'Hello there!', message2:responseText, data_output: data_output, data_output2: array }); 
    }); 

}) 

Antwort

0

dieses Skript versuchen Datei.

+0

Warum sollte diese Variable auf false gesetzt werden, um den Variablenbereich zu ändern? –

+0

die! wird benötigt, um es in html zu entpacken, also sollten Sie es jetzt in Ihrem Skript verwenden können und ja JSON.stringify Ihre Daten in index.js – hariaon

+0

Das Diagramm rendert nicht, wenn ich das Skript hinzufüge. –

Verwandte Themen