Scala code in JavaScript using Scala's '@'

Scala code in JavaScript using Scala's '@'

本文关键字：Scala using code in JavaScript      更新时间：2023-09-26

我正在使用带有Scala和Mongo的Playframework。我有一个scala.html文件，它具有以下参数

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

dairyData映射包含一个日期和该日期的6行数据点。

我还有一个JavaScript文件，它在同一文件中使用谷歌的折线图

<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、Stemming和Slaap，其中包含9天的数据。

还有一个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>

我的问题是，如何用Scala映射中的数据填充用JavaScript绘制的折线图JavaScript似乎不适用于Scala的"@"

我想使用JavaScript折线图，因为所有Java/Scala折线图看起来都很难看。但如果你有另一种方法，我也想听听他们的意见。

选项1：直接嵌入

如注释中所示，您可以将Scala值转换为JsValue，然后转换为String，然后将其与@Html一起放置在页面中，并将其分配给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）：提供一个执行AJAX调用的update()函数，并在ready()中使用该函数进行初始显示。这个功能也可以绑定到一个按钮上：

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();
});
相关文章：