系统中第一个报表框架是jfreeCharts，这个框架使用起来也比较方便，但功能不是很强大，而且页面（生成的图片）也不怎么美观（虽然可以尽力将其调至最佳状态）。老总觉得这框架太丑陋，没脸见人，让我找找js的框架。
js框架页面渲染能力比较出色，而且轻量易于使用和维护。在网上看了看，还真不少。比如时下流行的jsCharts、fusionCharts(free/v3 eg),效果最炫的highCharts，当然还有搜索巨头google的jgCharts,jQuery Google Charts，与prototype结合较为紧密的Protochart、Protovis等等。这些框架一开始还真让人眼花缭乱了。
老总看到效果后第一个选的就是Highcharts,highcharts官方的文档写的还真详细（英文），做好后效果还真不错。但浏览器跑着跑着就被卡住了。用sIEve测试，内存泄露相当严重。偶滴个神啊，这东西还敢拿出来卖钱（虽说不贵，也就一百来块钱，但总不能拿出来害人吧）。这个酷炫的东西就这样被无形的扼杀了，不过还是希望Highcharts在下个版本时将这个漏洞给补上。看了看其他的js报表工具，也有不少存在内存泄露的。我这里就不一一列举了，有兴趣的朋友可以自己试试。
无奈之下，只好有去看其他的框架，使用框架，稳定性是首要的，我的首选是jsCharts，但jsCharts没有动态效果，而且还存在一些bug，比如中文乱码的问题。中文乱码现在应该不算是问题了，已经有人将这个问题给解决了。jsCharts是将所有要展现的信息统一绘图，当然也包括标题，横纵坐标说明信息等等。这样一来，由于中文是没法绘图的，中文的显示就成立一堆乱码。以下是乱码的解决方案，如果不太感兴趣，可以略过不看。
1.从网上下载jscharts_mb.js，将jscharts.js替换。
2.页面编码设置为utf-8,最好在页面头部分将下面这句也加进去：
<meta http-equiv="content-type" content="text/html; charset=utf-8">
3.在生成一个JSChart实例之后紧跟着执行一个函数patchMbString()，如：
var myChart = new JSChart('graph', 'pie');
myChart.patchMbString();
//以下是设置字体样式，不是必须的，可以自行选择
myChart.setFontFamily("微软雅黑");
myChart.setAxisValuesFontSize(9);
myChart.setPieUnitsFontSize(10);
下面说说我在系统中用的fusionCharts框架，这个框架生成的是flash文件，所以动画效果是很明显的，最让人欣慰的是，它不存在内存泄露的情况。
fusionCharts官方有示例，但没有文档。我对此深感不爽。改个属性都相当的麻烦，或许该去看看具体实现。
fusionCharts的使用其实也很简单，按照给出的模板来，应该是很方便的，最让我感到头痛的是标题字体大小的改变。目前没有找到直接相对应的属性，只好采取一些折中的方式，比如整体字符调大，页面调成适中的比率等。<graph>标签中有个outCnvBaseFontSize属性，<categories>中有个fontSize属性，两相结合者调整。
/**
* fusionCharts
*/
StringBuffer graphs=new StringBuffer(255);
graphs.append("<graph ")
.append(" decimalPrecision='1'")// showAlternateHGridColor='1' AlternateHGridAlpha='30' AlternateHGridColor='CCCCCC'
.append(" caption='"+(miniWin?DateFormatUtil.getCurYYYYMM(null):"")+"风险事件变更统计' outCnvBaseFontSize='"+(miniWin?12:15)+"' "+(allZero?" yAxisMaxValue='1' ":" ")+">");
if(rowKeys!=null&&rowKeys.length>0){
//风险事件等级类型-x
graphs.append("<categories font='宋体' fontColor='000000' fontSize='"+(miniWin?12:15)+"' > ");
if(rowKeys.length==1){
for (int i = 0; i < rowKeys.length; i++) {//
graphs.append("<category name='"+rowKeys[i]+"' />");
}
graphs.append("</categories>");
//添加数据
String [] colors={"AA4643","80699B","4572A7", "89A54E", "3D96AE", "DB843D","92A8CD", "A47D7C","B5CA92"};
for (int i = 0; i < colKeys.length; i++) {
graphs.append("<dataset seriesname='"+colKeys[i]+"' color='"+colors[i]+"'>");
graphs.append("<set value='"+data[0][i]+"' />");
graphs.append("</dataset>");
}
}else{
for (int i = 0; i < colKeys.length; i++) {//
graphs.append("<category name='"+colKeys[i]+"' />");
}
graphs.append("</categories>");
//添加数据
String [] colors=new String []{"4572A7", "AA4643", "89A54E", "80699B", "3D96AE", "DB843D", "92A8CD", "A47D7C", "B5CA92"};
for (int i = 0; i < rowKeys.length; i++) {
graphs.append("<dataset seriesname='"+rowKeys[i]+"' color='"+colors[i]+"'>");
for (int j = 0; j < colKeys.length; j++) {//
graphs.append("<set value='"+data[i][j]+"' />");
}
graphs.append("</dataset>");
}
}
}
graphs.append("</graph>");//end
request.setAttribute("graphs", graphs.toString());
jsp页面代码如下：
<head>
<title>风险图表</title>
<jsp:include page="../common/meta.jsp"/>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="${root}/js/FusionCharts/FusionCharts.js"></script>
</head>
<body>
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td valign="top" class="text" align="center">
<div id="chartdiv" align="left">FusionCharts. </div>
<script type="text/javascript">
var chart =null;
<s:if test="winModel=='mini'">
chart = new FusionCharts("${root}/js/FusionCharts/FCF_MSColumn3D.swf", "ChartId", "284", "222");
</s:if><s:else>
chart=new FusionCharts("${root}/js/FusionCharts/FCF_MSColumn3D.swf", "ChartId", "700", "500");
</s:else>
chart.setDataXML("${graphs}");
chart.render("chartdiv");
</script>
</td>
</tr>
</table>
</body>
分享到：
相关推荐
ExtJS是一款基于JavaScript的前端开发框架，以其丰富的UI组件库著称。相比于Wabacus专注于报表开发的特点，ExtJS更加侧重于构建高质量的企业级Web应用程序。ExtJS提供了大量的预定义组件，如网格、表格、图表等，...
轻量级javascript报表工具: D3 NVD3 HightChart HightStock GO JS 地理报表（Google Map）
总结来说，JavaScript三维报表和饼图的实现涉及JavaScript基础、数据可视化库的使用、WebGL技术以及文件读取等知识点。通过JavaScript，开发者可以创建出动态、交互且富有洞察力的数据可视化工具，帮助用户更好地...
在现代Web开发中，前端框架扮演着至关重要的角色，它们为开发者提供了丰富的工具和组件，大大提升了开发效率和用户体验。本资源"Web前端框架模板（包括各类控件及展示图表）"是一个集成了多种控件和图表展示的HTML...
在JavaScript中实现三维饼图，可以借助各种库和框架，如D3.js、Highcharts、ECharts等，但也可以通过自定义代码来创建。 **JavaScript基础知识** 在理解JavaScript三维饼图前，首先需要了解JavaScript的基础知识。...
在JavaScript的世界里，有多种库和框架可以用来生成这些图表。下面将详细介绍一些常用的JavaScript库，以及如何利用它们来创建统计图和报表。 1. **ECharts** ECharts是由百度开发的一个开源的、轻量级的可视化库...
虽然理论上可以尝试将报表内容直接显示在`<div>`元素中，但是由于FineReport的JavaScript库采用了jQuery v1.9.2框架，这可能会导致与页面中其他JavaScript库发生冲突。为了避免此类问题，建议始终使用`<iframe>`的...
【标题】"国外先进的报表，纯HTML+JS"揭示了一个重要的技术趋势，即在现代Web应用中使用纯HTML和JavaScript来构建高效的报表系统。这种方式摆脱了对传统客户端插件的依赖，提供了更好的跨平台兼容性和用户体验。HTML...
综上所述，这段代码主要介绍了如何在ASP.NET应用程序中使用JavaScript来实现报表的打印功能，包括了报表框架的获取、报表的预览及打印等关键步骤。这对于开发具备报表打印功能的应用程序具有一定的参考价值。
在"web页面报表js"这个主题中，我们主要探讨的是如何利用JavaScript技术来实现动态、交互式的网页报表。JavaScript是一种广泛应用于客户端Web开发的编程语言，它赋予网页动态功能，使用户可以直接在浏览器中查看和...
"js做的三维报表"这一主题，意味着我们将在纯JavaScript环境中构建具有立体效果的报表，无需依赖其他库或框架。这种技术对于提升网页应用的用户体验和数据呈现能力至关重要。 首先，我们要了解JavaScript的基础，...
5. **lj用法说明.txt**：这可能是一个关于如何使用某种特定库或框架（可能是JavaScript库，如jQuery）的文档，用于在网页中动态加载和操作报表数据。 6. **在线教程资源**："Grid++Report5.0简单报表设计_电脑软件_...
总结起来，本项目提供的jar包集合可以帮助Java开发者轻松地在SSM或Spring Boot项目中集成润乾报表，实现高效的数据展示和分析功能。通过理解和掌握这些关键库的使用，你可以快速提升项目的业务分析能力，提高用户...
总结起来，"quee快逸报表的实例"是一个绝佳的学习资源，帮助初学者掌握如何在Struts项目中使用"quee快逸报表"。通过实践这个实例，你将能够熟练运用报表工具，提升你的Web开发技能，并为企业的数据驱动决策提供有力...
这需要在前端实现，可能使用ASP.NET MVC、Blazor或JavaScript框架（如React、Vue）。 6. **报表服务**：为了方便管理和部署报表，可以构建一个报表服务，提供API接口供其他应用调用。 在实际项目中，...
- **脚本支持**：支持Mozilla Rhino JavaScript脚本处理器。 #### 3. OpenReports - **简介**：OpenReports是一个基于Web的报表解决方案，用户可以通过浏览器查看动态创建的PDF、HTML或XLS格式的报表。该工具使用...
- 可以通过JavaScript操作iFrame来实现更高级的功能，比如动态更改报表内容或者调用报表中的方法。 ##### 3.2 示例代码详解 以下是一个完整的HTML示例，展示了如何将FineReport报表嵌入到一个HTML页面中： ```html...
1. HTML结构：报表的基础框架，定义了报表的布局和内容区域，如表格、卡片、列表等元素。 2. CSS样式：决定了报表的视觉效果，包括颜色、字体、间距、边框等，通过选择器对特定元素进行定制，保证整体风格的一致性。...