Question

我正在使用Play！框架。我有一个scala.html模板文件。

我正在尝试添加Google javascript库，以便将图形添加到Web应用程序中。

基本上只需要使用我自己的值来填充以下函数：

function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Date', 'Sales'],
          ['2004',  1000],
          ['2005',  1170],
          ['2006',  660],
          ['2007',  1030]
        ]);

所以我做了以下（这适用于HTML文件的其他部分，但不适用于Javasript）：

@for(run <- currentPage.getList) {
      [@run.date.format("dd MMM yyyy"),@run.sales],
                      }

但是以@符号为前缀的Scala代码在Javascript中无效。

有人可以提供建议吗？

感谢。

以下是整段代码：

@main {

    <h1 id="homeTitle">@Messages("runs.listRuns.title", currentPage.getTotalRowCount)</h1>

    @if(flash.containsKey("success")) {
        <div class="alert-message warning">
            <strong>Done!</strong> @flash.get("success")
        </div>
    }


    <!-- CHART  -->
         <html>
          <head>
            <script type="text/javascript"
                  src="https://www.google.com/jsapi?autoload={
                    'modules':[{
                      'name':'visualization',
                      'version':'1',
                      'packages':['corechart']
                    }]
                  }"></script>

            <script type="text/javascript">
              google.setOnLoadCallback(drawChart);

              function drawChart() {
                      var data = google.visualization.arrayToDataTable([
                      ['Date', 'Success Percentage'],

                      @for(run <- currentPage.getList) {
                          [@run.runDate.format("dd MMM yyyy"), @run.successPercentage],
                      }

                  ]);



                var options = {
                  title: 'Engineless Performance Monitoring',
                  curveType: 'function',
                  legend: { position: 'bottom' }
                };

                var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

                chart.draw(data, options);
              }
            </script>
          </head>
          <body>
            <div id="curve_chart" style="width: 80%; height: 500px"></div>
          </body>
        </html>
    <!-- CHART -->

    <div id="actions">    
        <form action="@link(0, "name")" method="GET">
            <input type="search" id="searchbox" name="f" value="@currentFilter" placeholder="Filter by Run Name...">
            <input type="submit" id="searchsubmit" value="Filter by Run Name" class="btn primary">
        </form>
    </div>

Answer 1

第一件事：你应该使用你的浏览器检查工具来读取错误，通过简单的循环收集这样的数据并不是一个好主意 - 因为你可以看到你最后有一个孤儿逗号字符item - JavaScript不接受这个。

最好的选择是在控制器的动作中构建JSON对象，然后将其作为参数传递给视图。它保证您不会有任何语法错误，如孤立逗号，未闭合的括号等。如果没有项目，它将生成有效的JS代码，如
var data = google.visualization.arrayToDataTable([]);（空数组）

Java伪代码看起来像这样（当然，在您的情况下，您需要迭代您的集合以填充myValues List

public static Result chartData() {

    // For JS you need an array of arrays, so use a List of Lists in Java
    List<List<Object>> myValues = new ArrayList<>();

    // Add the header
    myValues.add(new ArrayList<Object>(Arrays.asList("Date", "Sale")));

    // Inserting dummy data, 
    // in this place you should iterate your `currentPage.getList()` instead
    myValues.add(new ArrayList<Object>(Arrays.asList("2010", 1000)));
    myValues.add(new ArrayList<Object>(Arrays.asList("2011", 1030)));
    myValues.add(new ArrayList<Object>(Arrays.asList("2012", 1530)));
    myValues.add(new ArrayList<Object>(Arrays.asList("2013", 3507)));


    // Convert the values to JSON 
    // and wrap it with play.twirl.api.Html, so you won't need to do this within the template
    Html chartData = new Html(Json.toJson(myValues).toString());

    return ok(views.html.myChart.render(chartData));
}

以及 myChart.scala.html 视图

@(chartData: Html)

<script>
    var chartData = @chartData;
    console.log(chartData);

    // Or in your case...
    var data = google.visualization.arrayToDataTable(@chartData);
</script>

浏览器中的结果HTML代码是：

<script>
    var chartData = [["Date","Sale"],["2010",1000],["2011",1030],["2012",1530],["2013",3507]];
    console.log(chartData);

    // Or in your case...
    var data = google.visualization.arrayToDataTable([["Date","Sale"],["2010",1000],["2011",1030],["2012",1530],["2013",3507]]);
</script>

Answer 2

我认为您需要在日期周围添加引号：

@for(run <- currentPage.getList) {
  ['@run.runDate.format("yyyy")', @run.successPercentage],
 }

在播放模板中使用javascript

2 个答案: