Wicket：使生成的 csv 可用于 dygraphs JavaScript

Question

我试图弄清楚如何使动态生成的 csv 可用于 dygraphs JavaScript。

我正在使用 wicket 行为将 dygraph（JavaScript 图形）添加到我的标记中，如下面的代码示例所示。现在我已经将其硬编码为使用名为“dygraph.csv”的 csv 文件。我想改变这一点，而是让 dygraph 使用 String csv 中的值，我该如何实现这一点？

非常感谢任何帮助。

public class DygraphBehavior extends AbstractBehavior {
    private static final long serialVersionUID = -516501274090062937L;
    private static final CompressedResourceReference DYGRAPH_JS = new CompressedResourceReference(DygraphBehavior.class, "dygraph-combined.js");

    @Override
    public void renderHead(IHeaderResponse response) {
        response.renderJavascriptReference(DYGRAPH_JS);
    }
    @Override
    public void onRendered(Component component) {
        final String id = component.getId();
        Response response = component.getResponse();

        response.write(JavascriptUtils.SCRIPT_OPEN_TAG);
        response.write("new Dygraph(document.getElementById(\""+id+"\"), \"dygraph.csv\", {rollPeriod: 7, showRoller: true, errorBars: true});");
        response.write(JavascriptUtils.SCRIPT_CLOSE_TAG);
    }
}

---

public class Dygraph extends WebPage {
    public Dygraph() {
        String csv = "Date,ms\n20070101,62\n20070102,62";
        add(new ResourceLink<File>("csv", new ByteArrayResource("text/csv", csv.getBytes())));

        add(new Label("graphdiv").add(new DygraphBehavior()));
    }
}

---

<div>
    <h1>Dygraph:</h1>
    <div wicket:id="graphdiv" id="graphdiv" style="width:500px; height:300px;"></div>
    <a wicket:id="csv" href="#">dl generated csv</a>
</div>

Answer 1

public class Dygraph extends WebPage {
    public Dygraph() {
        String csv = "Date,ms\n20070101,62\n20070102,62";
        ResourceLink<File> link = new ResourceLink<File>("csv", new ByteArrayResource("text/csv", csv.getBytes()));
        add( link );

        //this is the url that should be passed to the javascript code
        CharSequence url = link.urlFor( IResourceListener.INTERFACE ); 

        add(new Label("graphdiv").add(new DygraphBehavior()));
    }
}

根据您的资源范围，还有其他解决方案，也许动态共享资源会更好（如果您的图形参数可以简单地作为 url 参数传递），但这会起作用。

Answer 2

JavaScript 需要在页面呈现后以某种方式查看数据。因此，您有两个选择：

1. 将数据嵌入到页面中（例如隐藏的 div），然后让 JavaScript 从那里以文本形式读取数据。

2. 创建 JavaScript 可以从中下载数据的 servlet。

第二个选项意味着您的页面呈现代码必须以某种方式将数据传递给 servlet。您可以尝试将其放入会话中，但随后它会坐在那里，占用 RAM。如果只是一点点数据并且您只有几个用户，那么可能不是问题。但如果情况并非如此，选项#1 可能更好。