由于业务需求，需要出各种统计图，因此使用了Highcharts，今天分享一下我使用Highcharts的一点点经验。
好多地方都有关于Highcharts的问题，但是好多都是下载的下的源码，值都是写死的，但是一般情况下，值都是动态的。下面是我写的代码，希望对大家能有点帮助。
下面只写了饼状统计图。
$(function() {
var options;
var chart;
var options;
$(document).ready(function() {
options = getPieOptions(options);
var chart = new Highcharts.Chart(options);
});
});
function getVoetTitle() {
var title = $("#voteTitle").val();
return title;
}
function getPieOptions(options) {
options = {
chart : {
renderTo : 'container',
plotBackgroundColor : null,
plotBorderWidth : null,
plotShadow : false
},
title : {
text : ''
},
tooltip : {
pointFormat : '<b>{point.percentage}%</b>',
percentageDecimals : 1
},
plotOptions : {
pie : {
allowPointSelect : true,
cursor : 'pointer',
dataLabels : {
enabled : true,
color : '#000000',
connectorColor : '#000000',
formatter : function() {
return '<b>' + this.point.name + '</b>: '
+ this.percentage + ' %';
}
}
}
},
series : [ {
type : 'pie',
data : eval($("#pieData").val())
} ]
};
options.title.text = getVoetTitle();
return options;
}
其中series的data 参数是是对象类型，所以使用eval 函数
下面为页面：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="Expires" content="0"/>
<title>投票</title>
<link href="$!{SystemParameter.getParamterValue("weburl")}/$!{SystemParameter.getParamterValue("cssStyle")}/css/bj.css" type="text/css" rel="stylesheet" />
<link href="../css/validator.css" rel="stylesheet" type="text/css" />
<link href="../css/flora.datepicker.css" rel="stylesheet" type="text/css" media="screen" title="core css file" charset="utf-8" />
<script type="text/javascript" src="../js/jquery-1.4.4.js"></script>
<script src="./js/highcharts.js"></script>
<script src="./js/showVoteStatistics.js"></script>
</head>
<body>
<div class="bt-box">
<div id="hidden">
<input id="pieData" type="hidden" value="$!{pieDataSbf}"/>
<input id="voteTitle" type="hidden" value="$!{votePaper.vote_name}"/>
</div>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</div>
</body>
</html>
分享到：
相关推荐
资源名称：Highcharts使用说明 中文WORD版内容简介：Highcharts是一个跨浏览器的Javaｓｃｒｉｐｔ图表控件，支持柱状图、趋势图、面积图、饼图、环形图、组合图、堆积图、散点图。Highcharts图表的基本功能，只需要...
这个“HighCharts使用案例代码”压缩包显然是一个包含具体示例的资源集合，对于学习和理解如何在实际项目中应用HighCharts非常有帮助。 首先，HighCharts的基本使用步骤包括以下几点： 1. **引入HighCharts库**：...
【标题】：“Highcharts使用” 在网页数据可视化领域，Highcharts是一个非常受欢迎的JavaScript库，它使得创建交互式图表变得简单高效。Highcharts以其丰富的图表类型、高度自定义的选项和出色的性能，广泛应用于...
以下是对`highcharts使用说明及demo`的详细解读： 1. **基本配置**：在使用Highcharts时，首先需要在HTML文件中引入Highcharts的JavaScript库。通常，这可以通过在`<head>`标签内添加链接到Highcharts CDN的`...
Highcharts使用说明 Highcharts是基于JavaScript的图表库，主要用于在Web页面上显示各种类型的图表，如线状图、柱状图、饼状图等。Highcharts库提供了非常灵活的配置选项，使得开发者可以根据需要自定义图表的样式...
完整的Highcharts使用手册,有丰富的实例，可以直接复制使用
网页图表Highcharts实践教程基础篇主要涵盖了如何使用Highcharts库创建和定制各种图表，以便在网页上呈现数据。Highcharts是一款强大的JavaScript库，专为Web开发者设计，用于生成高质量的数据可视化图表。它支持...
默认情况下，Highcharts使用`Exports.highcharts.com`进行图片导出。如果需要自定义导出服务器，需要修改`exporting.url`属性，指向自己的导出服务接口。此外，为了防止中文乱码问题，可能还需要对导出过程进行特殊...
以下是对Highcharts图形报表的使用说明和关键知识点的详细解释： 1. **引入依赖库**： 在使用Highcharts之前，首先需要引入必要的JavaScript库。`jquery.js`是jQuery框架，Highcharts是基于jQuery构建的，因此需要...
在本教程中，我们将学习如何使用Highcharts制作一个简单的柱状图。首先，确保你已经正确地安装了Highcharts库，这是开始创建图表的前提。 **步骤一：创建HTML容器** 在HTML文档中，我们需要添加一个`div`元素作为...
这个压缩包包含了一系列的Highcharts使用案例，对于前端开发者来说，是非常宝贵的参考资料。 首先，我们来详细了解Highcharts的基本概念。Highcharts是一个基于纯JavaScript的开源图表库，它可以方便地与HTML5和SVG...
**Highcharts.js 使用详解** Highcharts.js 是一个流行的JavaScript...通过阅读《Highcharts使用说明.doc》文档，你将能深入理解Highcharts的各个方面，从基本用法到高级功能，帮助你更好地利用这个库进行数据可视化。
本教程将聚焦于如何使用Highcharts结合AJAX技术，实现图表数据的远程加载，从而达到无刷新更新图表的效果。 首先，我们需要理解Highcharts的基本结构。Highcharts的核心是`Highcharts.Chart`对象，通过这个对象我们...
4. **gfx** - 这个目录可能存储了Highcharts使用的图形资源，如图标或者默认的符号，这些资源可以用于自定义图表的外观。 5. **api** - 这部分通常包含Highcharts的API文档，它详尽地解释了各种选项、方法和事件，...
在默认情况下，Highcharts使用一个基于服务器的导出服务，将图表转换为图像或PDF。然而，"客户端导出"功能消除了对服务器的依赖，所有处理都在用户的浏览器内部完成。这减少了网络延迟，使得导出过程更加迅速，尤其...
5. **传递数据**：使用OGNL从Action将数据传递到JSP页面，供Highcharts使用。 6. **测试与调试**：运行项目，验证图表的显示和交互效果是否符合预期。 通过"Highcharts Struts Demo"，开发者可以学习到如何在Java ...
### 报表HighCharts使用教程 #### 一、HighCharts简介 HighCharts是一款非常流行的JavaScript图表库，它基于SVG（可缩放矢量图形），在旧版本浏览器中使用VML（Vector Markup Language）作为后备方案。HighCharts...
Highcharts Standalone框架专为那些不在其网页中已经使用jQuery、MooTools或Prototype的用户设计，旨在减少使用Highcharts的额外负担。Highcharts和Highstock（另一个基于Highcharts的图表解决方案）在所有现代...
例如，可以使用jQuery或其他工具获取JSON数据，然后将其转化为JavaScript数组供Highcharts使用。 Highcharts还支持图表反转或轴反转，以及标签旋转，这使得即使在复杂的数据环境下，图表仍然保持清晰易读。通过以上...