Question

我对此很陌生，所以我可能犯了一些非常明显的错误。

我有一个包含Google可视化示例的java脚本文件和另一个jsp文件，我在这里调用此图表进行显示，但我得到的只是一个空白页面。

charts.js

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
                                                  ['Year', 'Sales', 'Expenses'],
                                                  ['2004',  1000,      400],
                                                  ['2005',  1170,      460],
                                                  ['2006',  660,       1120],
                                                  ['2007',  1030,      540]
                                                  ]);

var options = {
        title: 'Company Performance',
        vAxis: {title: 'Year',  titleTextStyle: {color: 'red'}}
};

var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

chart.draw(data, options);
}

test.jsp的

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<link rel="stylesheet" type="text/css" href="css/semantic.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/semantic.min.js"></script>
<script src="js/charts.js"></script>

</head>
<body>

<div class="ui segment">
    <div class="ui top attached label">profits</div>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
</div>

</body>  
</html>

Answer 1

要使用Google Loader，您应该使用

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

作为使用该API的其他脚本的上层。

同样使用src属性中的相对路径可能不适用于所有JSP。 URL重写可用于获取绝对路径。

chart.jsp：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>
  <title></title>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript" src="<c:url value='/js/chart.js'/>"></script>
</head>
<body>
<div class="ui segment">
  <div class="ui top attached label">profits</div>
  <div id="chart_div" style="width: 900px; height: 500px;"></div>
</div>

</body>
    </html>

chart.js之：

/**
 * Created by Roma on 05.11.2014.
 */
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses'],
    ['2004',  1000,      400],
    ['2005',  1170,      460],
    ['2006',  660,       1120],
    ['2007',  1030,      540]
  ]);

  var options = {
    title: 'Company Performance',
    vAxis: {title: 'Year',  titleTextStyle: {color: 'red'}}
  };

  var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

  chart.draw(data, options);
}

谷歌可视化BarChart文件未加载

1 个答案:

chart.jsp：

chart.js之：