谷歌可视化条形图文件未加载

Google visualization BarChart file not loading

本文关键字：加载 文件 条形图 可视化 谷歌      更新时间：2023-09-26

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

我有一个包含谷歌可视化示例的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>

要使用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);
}
相关文章：