我不能使用jquery和pug将变量传入highcharts函数。

I cannot pass in a variable into the Highcharts function using jquery and pug which I need in order to set data in series. I created a function called getData in my index.js file that outputs information in the following format

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

{ 'HEALTH AND HUMAN SERVICES': 1788131, 'HUMAN RESOURCES': 107285, 'DEPARTMENT OF PUBLIC WORKS': 228969, 'DEPARTMENT OF FINANCE': 27500, 'CULTURAL SERVICES': 23600, 'MARIN COUNTY PARKS': 28380, 'MARIN COUNTY FIRE': 9600, 'MARIN COUNTY FREE LIBRARY': 2672, PROBATION: 0, 'AGRICULTURE WEIGHTS MEASURES': 20000 }

{'健康与人类服务'：1788131，'人力资源'：107285，'公共部门'：228969，'财政部'：27500，'文化服务'：23600，'MARIN COUNTY PARKS'：28380，' MARIN COUNTY FIRE'：9600，'MARIN COUNTY FREE LIBRARY'：2672，PROBATION：0，'农业衡量标准'：20000}

I then assign the object to a variable and then push it into an array. My problem is having access the the variable data_output2 when I pass it into the function. I don't know much Javascript, so this really is a hack job. Any help would be really appreciated!

然后我将对象分配给变量，然后将其推入数组。我的问题是当我将它传递给函数时访问变量data_output2。我不太了解Javascript，所以这真的是一个黑客工作。任何帮助将非常感激！

index.pug file

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 file

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 个解决方案

#1

try this script.

试试这个脚本。

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