jqueryとpugを使ってハイチャート関数に変数を渡すことはできません。

Question

データを直列に設定するために必要なjqueryとpugを使用して、Highcharts関数に変数を渡すことができません。私は、次の形式で情報を出力する私のindex.jsファイル内のgetDataという関数を作成し

{「保健社会福祉」：1788131、 「人材」が：107285は、 「PUBLIC OF DEPARTMENTワークス」：228969 、 '財務省'：27500、 '文化的サービス'：23600、 'MARIN COUNTY PARKS'：28380、 'MARIN COUNTY FIRE'：9600、 'マリン郡FREE LIBRARY'：2672、 保護観察：0 、 '農業用秤量措置'：20000}

次に、オブジェクトを変数に割り当ててから、それを配列に変換します。私の問題は、関数に渡すときに変数data_output2にアクセスすることです。私は多くのJavascriptを知らないので、これは実際にはハックの仕事です。どんな助けでも本当にありがとう！

index.pugファイル

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 }); 
    }); 

}) 

Answer 1

を提出。

var data_output2 =!{data_output2} 
$(function(){ 
    //your code stuff 
})