1

私はこの翡翠のテンプレートを持っています:

html
  head
    script(type="text/javascript" src="https://www.google.com/jsapi")
    script(type='text/javascript')
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
      var data = google.visualization.arrayToDataTable([
      ['Date', 'Tin_A' ],

       - each datapoint in myData
            "[" + datapoint.date + "," + datapoint.value + "],"

      ]);
      var options = {
      title: 'bla'
      };
      var chart = new google.visualization.LineChart(document.getElementById('chart_line'));
      chart.draw(data, options);
      }


  body
    h1= title
    #chart_line

そして、この呼び出しを使用して、express/node.js で jade テンプレートをレンダリングしています。

app.get('/', function(req, res){
  sensors.findSensorAllData(2, 2, function (error,emps){
        console.log(emps);
        res.render('tmp', {
            title : 'Temperatures in a row',
            myData : emps
        });
    });
});

の出力console.log(emps)は次のとおりです。

[ { _id: 524b8642028e167fb0e3661d,
    sensor_id: 2,
    value: 49,
    date: Tue Oct 01 2013 20:34:40 GMT-0600 (CST) },
  { _id: 524b863d028e167fb0e3661c,
    sensor_id: 2,
    value: 19,
    date: Tue Oct 01 2013 20:34:35 GMT-0600 (CST) } ]

レンダリングが発生した後、jade テンプレートの javascrip 内に値があると思いますが、うまくいきません。行に意味がないかのように、プレーンテキストで同じ行しか取得し- each datapoing in myDataません...何が間違っていますか? ありがとう

--- 編集: 行を置き換えるとすべて正常に動作します

- each datapoint in myData
            "[" + datapoint.date + "," + datapoint.value + "],"

と

  ['2004',  20],
  ['2005',  30],
  ['2006',  40]
4

3 に答える 3

1

醜い警告:

script
  ...
  var data = google.visualization.arrayToDataTable(['Date', 'Tin_A' ].concat(!{JSON.stringify(myData.map(function(i) { return [ i.date, i.value ] })) }));
于 2013-10-02T07:32:07.403 に答える
1

括弧の周りに引用符があるため、配列ではなく文字列を誤って挿入している可能性があると思います。

- each datapoint in myData
        "[" + datapoint.date + "," + datapoint.value + "],"

私はジェイドにあまり詳しくありませんが、代わりに次のことをしたいと思うかもしれません：

- each datapoint in myData
        [#{datapoint.date}, #{datapoint.value}],

また、あなたが提供したサンプルデータでは、Date の年の部分のみを使用していますが、datapoint.dateプロパティの内容は完全な Date オブジェクトである可能性があります。それがこの用途に必要かどうかはわかりません。

于 2013-10-02T03:42:39.150 に答える
1

あなたがやろうとしていることがうまくいかない理由については、この質問の選択された回答を参照してください。( JADE + EXPRESS: インライン JS コード (クライアント側) でオブジェクトを反復処理していますか? )

基本的に、スクリプト タグをヒットするとすぐに、Jade パーサーに生の形式で処理するように指示し、それ以上の処理は行われません。本当にやりたいことは、次のようにコードのスクリプト タグをやり直すことです。

- if (typeof(pins) != "object")
!= "<script type='text/javascript'>"
!=   "google.load('visualization', '1', {packages:['corechart']});
!=   "google.setOnLoadCallback(drawChart);
!=   "function drawChart() {
!=   "var data = google.visualization.arrayToDataTable([
!=   "['Date', 'Tin_A' ],"
- forEach datapoint in myData
  !=   "[" + datapoint.date + "," + datapoint.value + "],"

!=   "]);"
!=   "var options = {"
!=   "title: 'bla'"
!=   "};"
!=   "var chart = new google.visualization.LineChart(document.getElementById('chart_line'));"
!=   "chart.draw(data, options);"
!=   "}"

これを試してみてください、しかし私はそれがうまくいくはずだと確信しています。

PS: 上記のリンクも (私は信じています)、Jade スクリプト タグ内でそのようなテンプレート プレースホルダー補間を使用できないため、前の回答が正しくない理由を明確に示しています。

于 2013-10-02T03:49:53.763 に答える