使用 Scala 的“@”在 JavaScript 中编写 Scala 代码

Question

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

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

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

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

<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 线图看起来都非常难看。但是，如果您有其他方法，我也想听听。

Answer 1

选项 1：直接嵌入

正如评论中所指出的，您可以将 Scala 值转换为 JsValue，然后转换为字符串，并与 @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的函数可以单独测试

一些sn-ps用于说明：

在控制器中：提供以 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();
});