Question

我正在学习如何在java和html文件之间进行通信，

我在java中创建了一个小片段：

public class OpenInBrowser {
    public static void main(String[] args) {

        JSONObject dataSet = new JSONObject();
        dataSet.put("keyA", "SomeValueA");
        dataSet.put("keyB", "SomeValueB");
        dataSet.put("keyC", "SomeValueC");

        JSONObject someProperty = new JSONObject();
        dataSet.put("someproperty", "aproperty");

        JSONArray properties = new JSONArray();
        properties.add(dataSet);
        properties.add(someProperty);

    }
}

我的html文件：

< !DOCTYPE html>
<html lang="en">

<head>


<link href="http://getbootstrap.com/dist/css/bootstrap.min.css"
    rel="stylesheet">

<link
    href="http://getbootstrap.com/examples/justified-nav/justified-nav.css"
    rel="stylesheet">

<style>
.axis path {
    fill: none;
    stroke: #777;
    shape-rendering: crispEdges;
}

.axis text {
    font-family: Lato;
    font-size: 13px;
}
</style>

</head>

<body>

    <div class="container">

        <div class="jumbotron">

            <svg id="visualisation" width="1000" height="500"></svg>
            <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
            <script>
                function InitChart() {
                    var data = [ {
                        "sale" : "202",
                        "year" : "2000"
                    }, {
                        "sale" : "215",
                        "year" : "2002"
                    }, {
                        "sale" : "179",
                        "year" : "2004"
                    }, {
                        "sale" : "199",
                        "year" : "2006"
                    }, {
                        "sale" : "134",
                        "year" : "2008"
                    }, {
                        "sale" : "176",
                        "year" : "2010"
                    } ];
                    var data2 = [ {
                        "sale" : "152",
                        "year" : "2000"
                    }, {
                        "sale" : "189",
                        "year" : "2002"
                    }, {
                        "sale" : "179",
                        "year" : "2004"
                    }, {
                        "sale" : "199",
                        "year" : "2006"
                    }, {
                        "sale" : "134",
                        "year" : "2008"
                    }, {
                        "sale" : "176",
                        "year" : "2010"
                    } ];
                    var vis = d3.select("#visualisation"), WIDTH = 1000, HEIGHT = 500, MARGINS = {
                        top : 20,
                        right : 20,
                        bottom : 20,
                        left : 50
                    }, xScale = d3.scale.linear().range(
                            [ MARGINS.left, WIDTH - MARGINS.right ]).domain(
                            [ 2000, 2010 ]), yScale = d3.scale.linear().range(
                            [ HEIGHT - MARGINS.top, MARGINS.bottom ]).domain(
                            [ 134, 215 ]), xAxis = d3.svg.axis().scale(xScale), yAxis = d3.svg
                            .axis().scale(yScale).orient("left");

                    vis.append("svg:g").attr("class", "x axis").attr(
                            "transform",
                            "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
                            .call(xAxis);
                    vis.append("svg:g").attr("class", "y axis").attr(
                            "transform", "translate(" + (MARGINS.left) + ",0)")
                            .call(yAxis);
                    var lineGen = d3.svg.line().x(function(d) {
                        return xScale(d.year);
                    }).y(function(d) {
                        return yScale(d.sale);
                    }).interpolate("basis");
                    vis.append('svg:path').attr('d', lineGen(data)).attr(
                            'stroke', 'green').attr('stroke-width', 2).attr(
                            'fill', 'none');
                    vis.append('svg:path').attr('d', lineGen(data2)).attr(
                            'stroke', 'blue').attr('stroke-width', 2).attr(
                            'fill', 'none');
                }
                InitChart();
            </script>
        </div>

    </div>

</body>

</html>

具体我希望将我在java中创建的json传递给html文件中的initchart()函数。

我怎么做？

提前感谢。

如何将jsonobject传递给html文件

0 个答案: