时间戳

首页 > 解决方案 > 无法显示折线图

javascript - 无法显示折线图

问题描述

我想为我的 JSP 页面添加一个 js 折线图。但它不会显示在页面上。也无法弄清楚错误。这是我的代码。对此的任何帮助表示赞赏。

window.onload = function() {

  var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    theme: "light2",
    title: {
      text: "Title"
    },
    axisX: {
      title: "Year"
    },
    axisY: {
      title: "Value",
      includeZero: true,
    },
    data: [{
      name: "A",
      type: "spline",
      showInLegend: true,
      dataPoints: <%out.write(dataPoints);%>
    }]

  });
  chart.render();
}
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  <%@ page import="java.util.*" %>
    <%@ page import="com.google.gson.Gson"%>
      <%@ page import="com.google.gson.JsonObject"%>

        <%
Gson gsonObj = new Gson();
Map<Object,Object> map = null;
List<Map<Object,Object>> list = new ArrayList<Map<Object,Object>>();
 
map = new HashMap<Object,Object>(); 
map.put("x","2017");
map.put("y", 188); 
list.add(map);

map = new HashMap<Object,Object>(); 
map.put("x","2018");
map.put("y", 200); 
list.add(map);

map = new HashMap<Object,Object>(); 
map.put("x","2019");
map.put("y", 202); 
list.add(map);
 
String dataPoints = gsonObj.toJson(list);
%>

          <!DOCTYPE html>
          <html>

          <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>JSP Page</title>
          </head>

          <body>
            <div>
              <div id="chartContainer" style="height: 370px; width: 100%;"></div>
              <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

            </div>
          </body>

标签： javascriptjavajspchart.js

解决方案

推荐阅读