个人中心
gpt4 book ai didi

java - d3新手，无法用json显示图表

转载 作者：行者123 更新时间：2023-12-01 11:55:32 25 4
gpt4 key购买 nike

我对 d3 非常非常陌生，在使用 json 获取折线图时遇到问题。

在我的 ReportBucketDAO.java 中，我使用数据库数据生成 json。

while (rs.next()) 
{
     String currency = rs.getString("currency");

     Timestamp pointDateTimeTs = rs.getTimestamp("point_datetime");
     String pointDateTime = pointDateTimeTs.toString();
     pointDateTime = pointDateTime.substring(0, pointDateTime.indexOf('.'));
     double pointValue = rs.getDouble("sum(`point_value`)");
     org.json.JSONObject jobj = new org.json.JSONObject();
     jobj.put("currency", currency);
     jobj.put("pointDateTime", pointDateTime);
     jobj.put("pointValue", pointValue);
     jArray.add(jobj);
}

json 字符串是:

[{"pointValue":274,"pointDateTime":"2015-01-20 00:00:00","currency":"GBP"},
{"pointValue":571,"pointDateTime":"2015-01-20 00:00:00","currency":"SGD"},
{"pointValue":561,"pointDateTime":"2015-01-20 00:00:00","currency":"USD"}]

我还有一个名为 getVolumeData.jsp 的 jsp，它允许我将上面的 json 保存到“data.json”

<%@page import="java.util.ArrayList"%>
<%@page import="com.ach.model.ReportBucket"%>
<%@page import="com.ach.model.ReportBucketDAO"%>
<%@page import="java.io.*"%>
<%@page import="org.json.simple.*"%>
<%
    ReportBucketDAO rbDAO = new ReportBucketDAO();

    JSONArray rbjson = rbDAO.retrieveByReportTypeJson();
    System.out.println(rbjson);
    request.setAttribute("rbJsonString", rbjson);

    try {
        FileWriter jsonFileWriter = new FileWriter("data.json");
        jsonFileWriter.write(rbjson.toJSONString());
        jsonFileWriter.flush();
        jsonFileWriter.close();
        System.out.println("Done");
    } catch (IOException e) {
        e.printStackTrace();
    }
%>

我将 d3 内容称为 home.jsp 内容

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <meta name="description" content="">
            <meta name="author" content="">
            <link rel="icon" href="../../favicon.ico">

            <title>Project</title>

            <link rel="shortcut icon" href="assets/img/tBank.ico">

            <!-- Bootstrap core CSS -->
            <link href="assets/css/bootstrap.min.css" rel="stylesheet">
            <script data-require="d3@3.5.3" data-semver="3.5.3" src="assets/js/d3.js"></script>

            <!-- Custom styles for this template -->
            <link href="assets/css/dashboard.css" rel="stylesheet">

            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
            <script type="text/javascript" src="assets/js/script.js"></script>
            <script>
                $(function() {
                    $("#header").load("header.jsp");
                    $("#sidebar").load("sidebar.html");
                    //$("#d3content").load("getVolumeData.jsp");
                });
            </script> 
        </head>

    <body>
    <div id="header"></div>
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar" id="sidebar">
          <!--Sidebar here-->
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
          <!--                    <img id="loading" src="assets/img/ajax_load.gif" alt="loading" />-->
          <div id="pageContent">
            <!-- this is where our AJAX-ed content goes -->
            <h1 class="page-header">My Dashboard</h1>
          </div>
          <div id="d3content">
            <script type="text/javascript">
                $("#d3content").load(function(event){
                    // Set the dimensions of the canvas / graph
            var margin = {
              top: 30,
              right: 20,
              bottom: 70,
              left: 50
            },
              width = 600 - margin.left - margin.right,
              height = 300 - margin.top - margin.bottom;

             // Parse the date / time
            var parseDate = d3.time.format("%Y-%m-%d %X").parse;

             // Set the ranges
            var x = d3.time.scale().range([0, width]);
            var y = d3.scale.linear().range([height, 0]);

             // Define the axes
            var xAxis = d3.svg.axis().scale(x)
              .orient("bottom").ticks(5);

            var yAxis = d3.svg.axis().scale(y)
              .orient("left").ticks(5);

             // Define the line
            var priceline = d3.svg.line()
              .x(function(d) {
                return x(d.pointDateTime);
              })
              .y(function(d) {
                return y(d.pointTime);
              });

             // Adds the svg canvas
            var svg = d3.select("#d3content")
              .append("svg")
              .attr("width", width + margin.left + margin.right)
              .attr("height", height + margin.top + margin.bottom)
              .append("g")
              .attr("transform",
                "translate(" + margin.left + "," + margin.top + ")");

             // Get the data
            d3.json("data.json", function(error, data) {
              data.forEach(function(d) {
                d.symbol = d.currency;
                d.pointDateTime = parseDate(d.pointDateTime);
                d.pointTime = +d.pointValue;
              });
              console.log(data);
              // Scale the range of the data
              x.domain(d3.extent(data, function(d) {
                return d.pointDateTime;
              }));
              y.domain([0, d3.max(data, function(d) {
                return d.pointTime;
              })]);

              // Nest the entries by symbol
              var dataNest = d3.nest()
                .key(function(d) {
                  return d.symbol;
                })
                .entries(data);

              console.log(dataNest);

              var color = d3.scale.category10(); // set the colour scale

              legendSpace = width / dataNest.length; // spacing for the legend

              // Loop through each symbol / key
              dataNest.forEach(function(d, i) {
                console.log(d);
                svg.append("path")
                  .attr("class", "line")
                  .style("stroke", function() { // Add the colours dynamically
                    return d.color = color(d.key);
                  })
                  .attr("id", 'tag' + d.key.replace(/\s+/g, '')) // assign ID
                .attr("d", priceline(d.values));

                // Add the Legend
                svg.append("text")
                  .attr("x", (legendSpace / 2) + i * legendSpace) // space legend
                .attr("y", height + (margin.bottom / 2) + 5)
                  .attr("class", "legend") // style the legend
                .style("fill", function() { // Add the colours dynamically
                  return d.color = color(d.key);
                })
                  .on("click", function() {
                    // Determine if current line is visible 
                    var active = d.active ? false : true,
                      newOpacity = active ? 0 : 1;
                    // Hide or show the elements based on the ID
                    d3.select("#tag" + d.key.replace(/\s+/g, ''))
                      .transition().duration(100)
                      .style("opacity", newOpacity);
                    // Update whether or not the elements are active
                    d.active = active;
                  })
                  .text(d.key);

              });

              // Add the X Axis
              svg.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis);

              // Add the Y Axis
              svg.append("g")
                .attr("class", "y axis")
                .call(yAxis);

            });
                });
          </script>
          </div>
        </div>
      </div>
    </div>
    <!-- Bootstrap core JavaScript
        ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script data-require="bootstrap@3.3.1" data-semver="3.3.1" src="assets/js/bootstrap.min.js"></script>
    <!--<script src="assets/js/docs.min.js"></script>-->

  </body>
</html>

我希望将 d3 加载到 d3content 中，但它没有显示/显示任何内容，有什么帮助吗？

最佳答案

问题如下:

1.) 您没有加载 d3.js

2.) 您的变量未正确映射。在这个 block 中:

data.forEach(function(d) {
    d.currency = +d.currency; // this is a string do not use +
    d.pointDateTime = parseDate(d.pointDateTime);
    d.pointTime = +d.pointTime; // your json is pointValue, not pointTime
});

3.) 你的日期解析函数是错误的。应该是:

var parseDate = d3.time.format("%Y-%m-%d %X").parse;

清理它，产生这个 example .

关于java - d3新手，无法用json显示图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28475748/

25 4 0
文章推荐： java - 引用数组构造函数
文章推荐： Java - 最大堆中整数的非字典序倒序
文章推荐： .net - 这是在滥用通用类型系统吗？
文章推荐： java - 多个小部件实例 - 需要单独更新每个实例
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com