把.html转换成.jsp中jqplot画图表不能正常显示，出错的心得
在做这个的时候，明明html中是完全可行的，如下图：
但后缀名改成.jsp后竟出现如下情况：
这太坑爹了吧，我的图呢！
哎，又要自己找代码问题了，无奈！
先给出我还没修改前的代码吧，关于里面的.js，.css的，自己下个jqplot，里面都有，你们自己解决吧，哈哈
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="<%=basePath%>"> <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title><%=enterpriseName1 %> 能源管理中心</title> <link rel="stylesheet" type="text/css" href="css/Smoothness/style.css" />
<link rel="stylesheet" type="text/css" href="css/jQuery/jqPlot/jquery.jqplot.min.css" />
<link type="text/css" rel="stylesheet" href="css/jQuery/jqPlot/syntaxhighlighter/styles/shCoreDefault.min.css" />
<link type="text/css" rel="stylesheet" href="css/jQuery/jqPlot/syntaxhighlighter/styles/shThemejqPlot.min.css" /> <script type="text/javascript" src="js/jQuery/jquery.min.js"></script> <style type="text/css">
*
{
margin: 0px;
padding: 0px;
} a
{
text-decoration:none;
} a:hover
{
color:#FF0000;
} body
{
font-size: 12px;
font-family: "Microsoft YaHei";
} .menu div
{
margin-bottom: 8px;
} #topMenu ul
{
list-style-type: none;
}
#topMenu ul li
{
float: left;
width: 200px;
text-align: center;
} #headerBar
{
width: 100%; height: 35px; line-height: 35px;padding-left: 10px;
} #headerBar div
{
float: left; text-align: center;
} #footerBar
{
margin: 0px auto; text-align: center; border-top: 1px dashed #b8b8b8;color: #b8b8b8; margin-top: 15px;
} </style> </head> <body>
<!-- 页头 -->
<div id="headerBar" class="ui-widget-header">
<div id="logo">能源管理中心</div> <div id="topMenu">
<ul>
<li><%=enterpriseName1 %></li>
<li>能源管理中心</li>
</ul>
</div>
</div> <!-- 内容 -->
<div id="chart1" style="width:800px; height:300px"></div>
<button class="button-reset">恢复</button> <div id="chart2" style="width:800px; height:300px"></div>
<button class="button-reset">恢复</button> <!-- 页脚 -->
<div id="footerBar">
copyright © 2013 特种设备能效测试研究院 All Rights Reserved.
</div> <script type="text/javascript"> // Chart 1
$(document).ready(function () {
var s1 = [[1, 112000], [2, 122000], [3, 104000], [4, 99000], [5, 121000],
[6, 148000], [7, 114000], [8, 133000], [9, 161000], [10, 173000]];
var s2 = [[1, 10200], [2, 10800], [3, 11200], [4, 11800], [5, 12400],
[6, 12800], [7, 13200], [8, 12600], [9, 13100]]; plot1 = $.jqplot("chart1", [s2, s1], {
// Turns on animatino for all series in this plot.
animate: true,
// Will animate plot on calls to plot1.replot({resetAxes:true})
animateReplot: true,
cursor: {
show: true,
zoom: true,
looseZoom: true,
showTooltip: false
},
series:[
{
pointLabels: {
show: true
},
renderer: $.jqplot.BarRenderer,
showHighlight: false,
yaxis: 'y2axis',
rendererOptions: {
// Speed up the animation a little bit.
// This is a number of milliseconds.
// Default for bar series is 3000.
animation: {
speed: 2500
},
barWidth: 15,
barPadding: -15,
barMargin: 0,
highlightMouseOver: false
}
},
{
rendererOptions: {
// speed up the animation a little bit.
// This is a number of milliseconds.
// Default for a line series is 2500.
animation: {
speed: 2000
}
}
}
],
axesDefaults: {
pad: 0
},
axes: {
// These options will set up the x axis like a category axis.
xaxis: {
tickInterval: 1,
drawMajorGridlines: false,
drawMinorGridlines: true,
drawMajorTickMarks: false,
rendererOptions: {
tickInset: 0.5,
minorTicks: 1
}
},
yaxis: {
tickOptions: {
formatString: "%'d"
},
rendererOptions: {
forceTickAt0: true
}
},
y2axis: {
tickOptions: {
formatString: "%'d"
},
rendererOptions: {
// align the ticks on the y2 axis with the y axis.
alignTicks: true,
forceTickAt0: true
}
}
},
highlighter: {
show: true,
showLabel: true,
tooltipAxes: 'y',
sizeAdjust: 7.5 , tooltipLocation : 'ne'
}
}); }); // Chart 2
$(document).ready(function(){
var data = [
['厂区一', 12],['厂区二', 9], ['厂区三', 14],
['厂区四', 16],['厂区五', 7], ['厂区六', 9]
];
var plot1 = jQuery.jqplot ('chart2', [data],
{
seriesDefaults: {
// Make this a pie chart.
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
// Put data labels on the pie slices.
// By default, labels show the percentage of the slice.
showDataLabels: true
}
},
legend: { show:true, location: 'e' }
}
);
});
</script> <script type="text/javascript" src="js/jQuery/jqPlot/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="js/jQuery/jqPlot/syntaxhighlighter/scripts/shCore.min.js"></script>
<script type="text/javascript" src="js/jQuery/jqPlot/syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
<script type="text/javascript" src="js/jQuery/jqPlot/syntaxhighlighter/scripts/shBrushXml.min.js"></script> <script type="text/javascript" src="js/jQuery/jqPlot/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="js/jQuery/jqPlot/plugins/jqplot.highlighter.min.js"></script>
<script type="text/javascript" src="js/jQuery/jqPlot/plugins/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="js/jQuery/jqPlot/plugins/jqplot.pointLabels.min.js"></script> <script type="text/javascript" src="js/jQuery/jqPlot/plugins/jqplot.pieRenderer.min.js"></script>
<script type="text/javascript" src="js/jQuery/jqPlot/plugins/jqplot.donutRenderer.min.js"></script>
</body>
</html>
经过整个上午的努力，得到了一个简单的解决方案，如下所示嘿：
其实很简单啦 ，就是把
<base href="<%=basePath%>">
这句给删了，然后再加上<script type="text/javascript" src="js/excanvas.js"></script>这句，关于excanvas.js上网随便下个，好像jqplot里面也有。然后再把后缀改成.jsp，哈，完美运行中............
把.html转换成.jsp中jqplot画图表不能正常显示，出错的心得的更多相关文章
- 使用bootstrap的html文件转换成jsp…
问题:使用bootstrap的html文件转换成jsp时表单高度变窄 解决方法: 将jsp中html文档类型修改为<!DOCTYPE html> 问题即可解决. 也就是bootstrap只 ...
- ttf字体转换成web中使用的woff、svg、eot格式字体
网站地址:http://www.fontsquirrel.com/tools/webfont-generator(还可以缩小字体文件大小,强烈推荐) ttf转换成eot格式的字体软件:EOTFAST. ...
- 把数组转换成sql中能使用的字符串
1.数组对象转换成字符串,拼接成符合sql语句的语法 2.代码如下例子 public static void testString(){ String[] str=new String[ ...
- Unix时间戳转换成C#中的DateTime
先交代一下应用场景:我们的软件需要做一个简单的有效期验证保护.初始的想法是 在本地将安装时间.启动时间.当前时间做比较,为了防止记录被修改,记录在注册表的特殊的地方并加密. 我使用了.net自带的rs ...
- 美女程序员是如何将QQ转换成题目中那串数字的--读博文《找女神要QQ号码》
我只能说好好的端午节你们不约么?,还在这里写代码?我也是够无聊的,下班了不走也在这跟风写着玩!<找女生要QQ号码原文>原文链接http://www.cnblogs.com/iforever ...
- JSP中重定向页面没有全屏显示的问题解决
<script type="text/javascript"> window.onload=function(){ if(window.parent != window ...
- ASP.NET MVC 获得 view 中的HTML并将其中的内容自动转换成繁体中文。
一.思路 1.获得 asp.net mvc 输出的 html 的字符串. 2.将拿到的 html 字符串中的简体中文转换成繁体中文. 3.输出 html. 二.实现 1.扩展 RazorView 视图 ...
- jsp中两种include的区别【转】
引用文章:http://www.ibm.com/developerworks/cn/java/j-jsp04293/ http://www.cnblogs.com/lazycoding/archive ...
- RSA的密钥把JAVA格式转换成C#的格式
RSA算法在C#与JAVA之前的交互 在JAVA生成一对RSA私钥和公钥的时候,是以下的形式给到C#去调用: string publickey = @"MIGfMA0GCSqGSIb4DQE ...
随机推荐
- cygwin简介及使用
一个是真实的假货,一个是冒牌的真品前指 Cygwin,后指 Linux/VMWare 路不管平还是陡,终归你要走的,如果你愿意投入到linux开发的社群中来,不会安装linux系统,不会配置工作环境是 ...
- 数据量越发庞大怎么办？新一代数据处理利器Greenplum来助攻
作者:李树桓 个推数据研发工程师 前言:近年来,互联网的快速发展积累了海量大数据,而在这些大数据的处理上,不同技术栈所具备的性能也有所不同,如何快速有效地处理这些庞大的数据仓,成为很多运营者为之苦恼的 ...
- SQL记录-Linux CentOS配置ORACLE 12c
1.准备LIINX软件包 操作系统:centos7 虚拟机:VMware 12 JDK:1.8 数据库:oracle 12c 2.配置基础环境 2.1 部署虚拟机VM(过程略) 2.2 部署操作系统C ...
- 网络基础知识（一）wireshark 三次握手实践
wireshark 三次握手简介 192.168.18.120 IP地址为我的本机虚拟机IP地址 过滤设置:ip.addr == 192.168.18.120 (ip.addr == 192.168. ...
- html文件中jquery与velocity变量中的$冲突的解决方法
1.使用jQuery代替$. 如:jQuery.ajax(); 缺点:不适合扩展,一旦替换成第三方库时,那就麻烦大发 2.使用jQuery.noConflict. 如:var j = jQuery.n ...
- JS 简易控制台插件 [供 博客, 论坛 运行js用]
今天厚着脸皮来推荐下鄙人写的一个小插件吧.看过我博客的应该都熟悉这个插件了,其实就是这货. 这东西是我去年写的,当时水平也不怎么样,不过好歹还是实现了简单功能.我先简单介绍下这东西什么用吧. 因为在 ...
- Zookeeper笔记之四字命令
Zookeeper支持一些命令用来获取服务的状态和相关信息,因为这些命令都是四个字母的,所以一般称为四字命令. 四字命令可以使用telnet或者nc向服务器提交,使用下面这个脚本可以当做是一个简易的客 ...
- Gson学习记录
Gson是Google开发来用来序列化和反序列化json格式数据的java库,他最大的特点就是对复杂类型的支持度高,可以完美解决java泛型问题,这得益于他对泛型类型数据的特殊处理,他的缺点就是速度慢 ...
- 【Hadoop】搭建完全分布式的hadoop【转】
转自:http://www.cnblogs.com/laov/p/3421479.html 下面博文已更新,请移步 ↑ 用于测试,我用4台虚拟机搭建成了hadoop结构 我用了两个台式机.一个xp系统 ...
- [SDOI2009]HH去散步 「矩阵乘法计数」
计数问题也许可以转化为矩阵乘法形式 比如若该题没有不能在一条边上重复走的条件限制,那么直接将邻接矩阵转化为矩阵乘法即可 故 矩阵乘法计数 对于计数问题,若可以将 \(n\) 个点表示成 \(n \ti ...