我无法使用jquery和pug将变量传入highcharts函数。

时间:2017-09-30 01:35:42

标签: jquery node.js express highcharts pug

我无法使用jquery和pug将变量传入Highcharts函数,这是我需要的,以便串行设置数据。我在index.js文件中创建了一个名为getData的函数,该函数以下列格式输出信息

{'健康与人类服务':1788131,   '人力资源':107285,   '公共部门部门':228969,   '财政部':27500,   '文化服务':23600,   ' MARIN COUNTY PARKS':28380,   ' MARIN COUNTY FIRE':9600,   ' MARIN COUNTY 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 });
    });

})

1 个答案:

答案 0 :(得分:0)

试试这个剧本。

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