选项1：直接嵌入

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＆amp; s＆＃39; @＆＃39;

我想使用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（功能，在单独的文件中）和数据之间有所不同。

优点：

＆＃34;更新＆＃34;按钮执行相同操作：使用AJAX拉取数据，然后刷新图表。它不需要整页重新加载。
您只能使用＆＃34;数据＆＃34; 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();
});

JavaScript中的Scala代码使用Scala＆＃39; @＆＃39;

1 个答案:

选项1：直接嵌入

选项2：单独获取数据