使用Scala的'@'在JavaScript中的Scala代碼

Question

我正在使用Scala和Mongo的Playframework。我有一個scala.html文件具有以下參數

@(pageData:Map[String,Any], dairyData:Map[String,Any]) 

的dairyData地圖包含日期和6行該日期的數據點。

我也有一個使用谷歌的折線圖在同一個文件

<script type="text/javascript"> 
    google.load('visualization', '1.1', {packages: ['line']}); 
    //google.setOnLoadCallback(drawChart); 

    function drawChart() { 

     var data = new google.visualization.DataTable(); 

     data.addColumn('number', 'Dag'); 
     data.addColumn('number', 'Pijn'); 
     data.addColumn('number', 'Stemming'); 
     data.addColumn('number', 'Slaap'); 

     data.addRows([ 
      [1, 1.0, 80.8, 41.8], 
      [2, 30.9, 69.5, 32.4], 
      [3, 25.4, 57, 25.7], 
      [4, 11.7, 18.8, 10.5], 
      [5, 11.9, 17.6, 10.4], 
      [6, 8.8, 13.6, 7.7], 
      [7, 7.6, 12.3, 9.6], 
      [8, 12.3, 29.2, 10.6], 
      [9, 16.9, 42.9, 14.8] 
     ]); 

     var options = { 
      chart: { 
      }, 
      width: 900, 
     height: 480 
     }; 

     var chart = new google.charts.Line(document.getElementById('linechart_material')); 

     chart.draw(data, options); 
    } 
</script> 

JavaScript的線型圖現在顯示3行稱爲Pijn，詞幹和Slaap，用9天數據的JavaScript文件。

現在顯示線條圖和我想要在段落中顯示在圖表中的數據的div。

<div style="width: 1000px; height: 500px;" id="linechart_material"> 
    @if(dairyData.get("0")!=None) { 
     @for((dairyPool,i) <- dairyData.asInstanceOf[Map[String,Any]].toArray.zipWithIndex){ 
      <p>@dairyData.get(dairyPool._1).get.asInstanceOf[Map[String,Any]]</p> 
     } 
    } 
</div> 

我的問題是，我怎麼能補中繪製的JavaScript和我在斯卡拉地圖數據的線型圖？ JavaScript似乎不適用於Scala的'@'

我想使用JavaScript線條圖，因爲所有的Java/Scala線條圖看起來都非常難看。但是，如果你有另一種方法來做到這一點，我想也聽到他們。

Answer 1

選項1：直接嵌入

正如評論與@Html表明您可以斯卡拉值轉換爲JsValue，然後進入一個字符串，共同就可以將其放置在頁面上，並將其分配到JavaScript變量。

控制器：

Ok(views.html.demo.show(Json.toJson(users).toString())) 

查看：

@(users: String) 

[...] 

<script type="application/javascript"> 
    var users = @Html(users); 
</script> 

選項2：獲取單獨

數據還有一個辦法：

• 頁面只呈現頁面佈局（沒有數據）
• 頁面加載完成後，JavaScript函數使用AJAX請求分別提取數據
• 然後使用響應中的數據填充圖表。

此方案需要更多的設置，但它提供了更好的分離：據數據不同的頁面佈局（HTML頁面），JavaScript之間的（功能，在一個單獨的文件），和。

優點：

• 「更新」 按鈕的功能相同的：拉使用AJAX的數據，並刷新該圖表。它不需要完整的頁面重新加載。

• 您可以使用「僅數據」JSON用於其他目的（在其他頁面等） - 它對圖表頁面不太緊密。

• 返回JSON的功能可以被單獨

測試用於說明某些片段：

在控制器：提供了一種方法，JSON返回數據：

implicit val userFormat = Json.format[User] 

private def getUsers() = { 
    List(
    User(0, "root"), 
    User(1, "jim")) 
} 

def get = { 
    Action { 
    request => 
     val users = getUsers() 
     Ok(Json.toJson(users)) 
    } 
} 

和JavaScript中（我在這裏使用jQuery）：提供一個update()函數，它執行AJAX調用，並在中使用此函數用於初始顯示。這功能可以綁定到一個按鈕，以及：

function update() { 
    $.ajax({ 
     url: "/demo/get", 
     method: "GET", 
     contentType: "application/json; charset=UTF-8", 

     dataType: "json", 

     success: function(response, textStatus, jqXHR) { 
     // Populate chart using the data in the response 
     }, 
    }); 
} 

$(document).ready(function() { 
    $("#updateButton").click(function() { 
     update(); 
    }); 

    update(); 
});