匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。你的浏览器禁用了JavaScript, 请开启后刷新浏览器获得更好的体验!
把饼图的静态数据换成动态拼接的数据后，下面把注释的data部分换成diskData饼图不能正常显示。显示形式见截图。静态数据如截图右边的图形。//这是绘图方法
function Available_area_b_Chart(diskData) {
var options = {
type: 'pie',
backgroundColor: '#f4f4f4'
text: '存储',
align: 'center',
verticalAlign: 'bottom'
subtitle: {
name: '存储',
data: diskData
name: '已使用',
color: '#32FF98'
name: '未使用',
color: '#00D8FF'
credits: {
enabled: false
plotOptions: {
dataLabels: {
//distance: -40,
formatter: function () {
return this.percentage.toFixed(1) + &%&;
tooltip: {
formatter: function () {
return this.point.name + &:& + this.percentage.toFixed(1) + &%&
$(&#available_area_b&).highcharts(options);
//这是拼接的json数据的方法
function CreateDiskJson(data) {
var disk = [];
disk.push(&[&);
$.each(data.rows, function () {
disk.push(&{&);
disk.push(&\&name\&:\&已使用\&,&);
disk.push(&\&y\&:& + Math.round(this.USED_SPACE_GB) + &,&);
disk.push(&\&color\&:\&#32FF98\&&);
disk.push(&},&);
disk.push(&{&);
disk.push(&\&name\&:\&未使用\&,&);
disk.push(&\&y\&:& + Math.round(this.FREESPACE_GB) + &,&);
disk.push(&\&color\&:\&#00D8FF\&&);
disk.push(&}&);
disk.push(&]&);
return disk.join('');
//ajax取数据部分
function GetMetricsInfoData() {
type: 'post',
url: 'JsonService/MetricsInfoJsonService.ashx?CommandControl=Auto&CommandEvent=Load&CommandName=Get',
dataType: 'json',
cache:false,
success: function (resultData) {
//根据获取的 数据初始化图表
//构建存储的json数据
var diskData = CreateDiskJson(resultData.Data);
Available_area_b_Chart(diskData);
//console.log(networkData);
//构建网络存储的json数据
//CreateNetworkJson(resultData.Data);
//取出来的数据格式
&[{&name&:&已使用&,&y&:95,&color&:&#32FF98&},{&name&:&未使用&,&y&:386,&color&:&#00D8FF&}]&
CreateDiskJson 这个函数里的代码犯了很严重的错，你的思路还是拼字符串，最后返回的数据也只是字符串，而不是对象。
js 里生成对象或数组对象的方法是：
// 定义数组
var arr = [];
for(var i=0;i&10;i++) {
// 定义对象
var obj = {};
// 设置对象值
obj.name = 'name';
obj.y = 1212121;
obj.color = '#000';
// 或者直接 obj = { name: '', y: 221, color: '##'}
// 将对象 push 到数组中
arr.push(obj);
}所以将你的代码改改就ok了。
要回复问题请先或
取悦他人太难，我们只取悦自己！
浏览: 2403
关注: 2 人问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
这是我的静态的demo,要改一下变成从views传数据到js中，生成饼图，谢谢了以下是我的代码：
我这样写的代码，静态页面里面是乱码
下面是静态页面的饼图js代码中series的数据，
下面是效果图
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
views.py这样写：
index.html里面这样写：
效果图是这样：
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
可以使用Ajax来提交啊！给你一个简单的例子吧！在views.py里面添加一个视图方法如下；注意在头部导入一个JsonResponse
from django.http import HttpResponse,JsonResponse
def ajax_sample(request):
if request.method == 'POST':
#POST goes here . is_ajax is must to capture ajax requests. Beginner's pit.
if request.is_ajax():
email = request.POST.get('email')
password = request.POST.get('password')
data = {"email":email,"password":password,"rsp":"hello I from server"}
return JsonResponse(data)
return render(request,'ajax_sample.html')
在你的templates里面可以写你的html文件
{% load staticfiles %}
&link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet"&
&script src="{% static 'js/jquery.js' %}"&&/script&
&div class="container"&
&form class="form-signin" method="POST"&
{% csrf_token %}
&h2 class="form-signin-heading"&Ajax submit form&/h2&
&div class="row"&
&div class="col-sm-3"&
&label for="inputUsername" class="sr-only"&Username&/label&
&input type="username" id="username" class="form-control" placeholder="Username" required autofocus&
&label for="inputEmail" class="sr-only"&Email Address&/label&
&input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus&
&label for="inputPassword" class="sr-only"&Password&/label&
&input type="password" id="inputPassword" class="form-control" placeholder="Password" required&
&button id="submit" class="btn btn-primary" type="submit"&Sign in&/button&
function getCookie(name) {
var cookieValue =
if (document.cookie && document.cookie != ''){
//cookies is something like "csftoken=ejfbewbfjenwnflrkmgkrmg"
var cookies = document.cookie.split(';');
for (var i = 0; i & cookies. i++){
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if(cookie.substring(0,name.length + 1) == (name + '=')) {
//So, here we just want to return a value of csftoken
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
return cookieV
$("#submit").click(function(e){
e.preventDefault();
//Prepare csrf token
var csrftoken = getCookie('csrftoken');
var email = $('#inputEmail').val();
var password = $('#inputPassword').val();
url: window.location.href,
//the endpoint, commonly same url
type: "POST", //http method
data: { csrfmiddlewaretoken : csrftoken,
email: email,
password: password,
// data sent with the post request
//handle a successful response
success : function(json){
console.log(json);
// another sanity check
//On success show thr data posted to server as a message
alert('Hi '+json['email']+'!.'+' You have entered password:'+json['password']+json["rsp"]);
//handle a non-success response
error: function(xhr,errmsg,err){
console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about error to the console
注意，这里使用的是Jquery中得Ajax函数，所以你需要下载一个jquery.min.js到你的静态文件（例如js/jquery.min.js)；对于boostrap你可以暂时不包含，因为它只是修饰作用！以上的代码实现的功能就是从网页获取一个表单，并且通过ajax上传到服务器，服务器接收成功会返回到客户端，客户端的success函数会获得返回的json数据，我想你的需求应该也大致如此吧！有什么问题可以继续交流！
分享到微博？
Hi，欢迎来到 SegmentFault 技术社区！⊙▽⊙ 在这里，你可以提出编程相关的疑惑，关注感兴趣的问题，对认可的回答投赞同票；大家会帮你解决编程的问题，和你探讨技术更新，为你的回答投上赞同票。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：Highcharts中，如何通过连接数据库获取数据。
你好，想跟你请教个问题：
Highcharts中，如何通过连接数据库获取数据。
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
text: 'Month'
text: 'Temperature (&A&C)'
如上，如何通过连接数据库获取x轴的值以及y轴的值
通过动态语言输出对应格式的json即可。直接用js读取比较麻烦，而且不一定能实现。
1.数据库的结构必须符合你的的报表结构！
2,通过查询所需要的数据，拼装成json格式的数据就ok了！
3,jsp获取这个json数据即可！
求相关代码
Highcharts 接受json格式数据，用这个吧
&!DOCTYPE HTML& &html& &&head& &&&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&& &&&title&Highcharts Example&/title&
&&&script type=&text/javascript& src=&& &&&script type=&text/javascript&& $(function () { &var a=document.getElementById(&zongjia&). & &alert(a); &&&&&&& $('#container').highcharts({ &&&&&&&&&&& chart: { &&&&&&&&&&&&&&& type: 'area' &&&&&&&&&&& }, &&&&&&&&&&& title: { &&&&&&&&&&&&&&& text: '报表' &&&&&&&&&&& }, &&&&&&&&&&& subtitle: { &&&&&&&&&&&&&&& text: '' &&&&&&&&&&& }, &&&&&&&&&&& xAxis: { &&&&&&&&&&&&&&& categories: ['1750', '1800', '1850', '1900', '1950', '2000', '2050'], &&&&&&&&&&&&&&& tickmarkPlacement: 'on', &&&&&&&&&&&&&&& title: { &&&&&&&&&&&&&&&&&&& enabled: false &&&&&&&&&&&&&&& } &&&&&&&&&&& }, &&&&&&&&&&& yAxis: { &&&&&&&&&&&&&&& title: { &&&&&&&&&&&&&&&&&&& text: '总额' &&&&&&&&&&&&&&& }, &&&&&&&&&&&&&&& labels: { &&&&&&&&&&&&&&&&&&& formatter: function() { &&&&&&&&&&&&&&&&&&&&&&& return this.value / 1000; &&&&&&&&&&&&&&&&&&& } &&&&&&&&&&&&&&& } &&&&&&&&&&& }, &&&&&&&&&&& tooltip: { &&&&&&&&&&&&&&& shared: true, &&&&&&&&&&&&&&& valueSuffix: '元' &&&&&&&&&&& }, &&&&&&&&&&& plotOptions: { &&&&&&&&&&&&&&& area: { &&&&&&&&&&&&&&&&&&& stacking: 'normal', &&&&&&&&&&&&&&&&&&& lineColor: '#666666', &&&&&&&&&&&&&&&&&&& lineWidth: 1, &&&&&&&&&&&&&&&&&&& marker: { &&&&&&&&&&&&&&&&&&&&&&& lineWidth: 1, &&&&&&&&&&&&&&&&&&&&&&& lineColor: '#666666' &&&&&&&&&&&&&&&&&&& } &&&&&&&&&&&&&&& } &&&&&&&&&&& }, &&&&&&&&&&& series: [{ &&&&&&&&&&&&&&& name: '总额', &&&&&&&&&&&&&&& data: [502, 635, 809, 947, , 5268] &&&&&&&&&&& }, { &&&&&&&&&&&&&&& name: '数量', &&&&&&&&&&&&&&& data: [106, 107, 111, 133, 221, 767, 1766] &&&&&&&&&&& }] &&&&&&& }); &&& }); &&&
&&&/script& &&/head& &&body& &script src=&Highcharts-3.0.2/js/highcharts.js&&&/script& &script src=&Highcharts-3.0.2/js/modules/exporting.js&&&/script&
&div id=&container& style=&min-width: 400 height: 400 margin: 0 auto&&&/div&
&input type=&text& name=&zongjia& id=&zongjia& value=&200,300,400,500,600,700,800&&
&&/body& &/html&
这是我的全部代码 假如200,300,400.。。这些数据是我全后台读出来的 如何将&data: [502, 635, 809, 947, , 5268]这数据改成200,300,400.。。用JS获取后赋值给a 但将a给data: [a]放在这无效？？
直接在你的页面上执行查询，将查询结果返回一个数组 &，然后在
&xAxis: { &&&&&&&&&&&&&&& categories: [&?php echo join(&,&,$models) ?&], & & & & & & & & &labels: { setp: 0, rotation: -75, align: &right&}
html页面不能使用&?php ?&的，我在百度找到答案了，谢谢
引用来自“孤魂123456”的答案html页面不能使用&?php ?&的，我在百度找到答案了，谢谢咋弄的 啊 &我也是困在这了用户名：坏坏小菜
访问量：8475
注册日期：
阅读量：1297
阅读量：3317
阅读量：446047
阅读量：1131418
51CTO推荐博文
& & highcharts是基于javascript的图表库，可以很简单快捷的在web应用程序中添加交互性很强的图表，可以免费提供给个人，非商业用途使用，支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。& & highcharts图表的界面美观，因为是通过javascript编写的，所以不需要安装插件即可运行，且运行的速度极快，兼容性好。本人亲测在IE8(需要将IE8的浏览器模式设置成IE8(B),文本模式设置为IE8标准),firefox33.0，Chrome28.0下图表显示良好，图表导出PNG,JPEG,PDF,SVG位图功能完全正常。附上在IE8上显示的图表截图一张。& &以上图表的显示请参照/topic/?951上的示例。如果要实现图表导出png或者jpeg等的功能的话，页面除了引用highcharts的核心js文件highcharts.js之外，还需要引用modules/exporting.js，除此之外，还需要修改下exporting.js，如果要鼠标悬浮出现中文的提示，将printChart ，downloadPNG ，downloadJPEG ，downloadPDF ，downloadSVG，contextButtonTitle 换成中文提示即可，如下所示：&&printChart : "打印图表",downloadPNG : "导出 PNG 图像",&downloadJPEG : "导出 JPEG 图像",downloadPDF : "导出 PDF 文档",&downloadSVG : "Download SVG vector image",contextButtonTitle : "图表导出"还需要将enctype : "multipart/form-data"这行代码注释或者去掉，如果不将这行代码注释或者去掉的话，通过servlet或者action是无法通过提取svg的xml,通过fop将图表转为jpeg格式的图片的。原因在于highcharts的exporting.js中采用的form是mulipart/form类型，使servlet或者action通过request的request.getParemeter获取到的svg的xml字符串为空(具体可以通过控制台输出查看)，因此无法输出jpeg格式的图片。我们要输出图片，pdf，SVG位图还需要用到batik-all-1.6.jar(此jar包中集成了很多开源的jar包核心的处理jar包为batik-codec.jar，它是apache项目组下面的一个专门用来处理图形生成技术的开源产品：The Apache XML
Graphics Project currently consists of the following
sub-projects, each focused on a different aspect of XML
Graphics: - A toolkit for Scalable Vector
Graphics (SVG), based in Java - A print formatter & renderer
for XSL-FO (FO=formatting objects), based in Java - A library with
various components used by Apache Batik and Apache FOP, written in
Java具体是啥意思就有劳各位大神自己去翻译了，所以java通过xml(json)等格式的数据转换为可以收缩大小的矢量图片的功能，当然，其中也有不少依赖的jar包，打开batik-all-1.6.jar我们就可以看到，如下)，fop.jar,xerces.jar，这些jar包的来源请自己百度(谷歌被墙了，百度就凑合着用吧)，当然我尽量在附件中上传这些jar包，highcharts-3.0.1的的js文件请自行下载，现在需要用到的js文件修改完成，jar包也齐全了。现在来看具体的jsp页面代码(此代参照别人的代码，自己手动加入了下载的功能)。&%@&page&language="java"&import="java.util.*"&pageEncoding="UTF-8"%&
String&path&=&request.getContextPath();
String&basePath&=&request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
&!DOCTYPE&HTML&PUBLIC&"-//W3C//DTD&HTML&4.01&Transitional//EN"&
&&&&&base&href="&%=basePath%&"&
&&&&&title&My&JSP&'index.jsp'&starting&page&/title&
&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"&
&script&type="text/javascript"&src=\'#\'" /jquery-1.8.0.min.js"&&/script&
&script&type="text/javascript"&src=\'#\'" /highcharts.js"&&/script&
&script&type="text/javascript"&src=\'#\'" /modules/exporting.js"&&/script&
&script&type="text/javascript"&src=\'#\'" /chart.js"&&/script&
&script&type="text/javascript"&charset="UTF-8"&
$(function&()&{
&&&&&&&&$('#container').highcharts({
&&&&&&&&&&&&chart:&{
&&&&&&&&&&&&&&&&type:&'column'
&&&&&&&&&&&&},
&&&&&&&&&&&&title:&{
&&&&&&&&&&&&&&&&text:&'数据点线性颜色渐变效果'
&&&&&&&&&&&&},
&&&&&&&&&&&&xAxis:&{
&&&&&&&&&&&&&&&&categories:&[
&&&&&&&&&&&&&&&&'Jan',
&&&&&&&&&&&&&&&&'Feb',
&&&&&&&&&&&&&&&&'Mar',
&&&&&&&&&&&&&&&&'Apr',
&&&&&&&&&&&&&&&&'May',
&&&&&&&&&&&&&&&&'Jun',
&&&&&&&&&&&&&&&&'Jul',
&&&&&&&&&&&&&&&&'Aug',
&&&&&&&&&&&&&&&&'Sep',
&&&&&&&&&&&&&&&&'Oct',
&&&&&&&&&&&&&&&&'Nov',
&&&&&&&&&&&&&&&&'Dec'
&&&&&&&&&&&&]
&&&&&&&&&&&&},
&&&&&&&&&&&&yAxis:&{
&&&&&&&&&&&&&&&&min:&0,
&&&&&&&&&&&&&&&&title:&{
&&&&&&&&&&&&&&&&&&&&text:&'雨量值&(mm)'
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&},
&&&&&&&&&&&&tooltip:&{
&&&&&&&&&&&&&&&&headerFormat:&'&span&style="font-size:10px"&{point.key}&/span&&table&',
&&&&&&&&&&&&&&&&pointFormat:&'&tr&&td&style="color:{series.color};padding:0"&{series.name}:&&/td&'&+
&&&&&&&&&&&&&&&&'&td&style="padding:0"&&b&{point.y:.1f}&mm&/b&&/td&&/tr&',
&&&&&&&&&&&&&&&&footerFormat:&'&/table&',
&&&&&&&&&&&&&&&&shared:&true,
&&&&&&&&&&&&&&&&useHTML:&true
&&&&&&&&&&&&},
&&&&&&&&&&&&plotOptions:&{
&&&&&&&&&&&&&&&&column:&{
&&&&&&&&&&&&&&&&&&&&pointPadding:&0.2,
&&&&&&&&&&&&&&&&&&&&borderWidth:&0,
&&&&&&&&dataLabels:{
&&&&&&&&&&&&enabled:true,&//是否显示数据标签
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&},
&&&&&&&&&&&&credits:&{
&&&&&&&&&&&& //去掉右下角显示的声明&
&&&&&&&&&&&& enabled:&false&&
&&&&&&&&&&&&},
&&&&&&&&&&&&exporting&:&{
filename&:&'chart',
url&:&'http://localhost:8080/chart/saveAsImage',//可以修改exporting.js中对应的url，这里的url会让exporting.js中的无效
&&&&&&&&&&&&series:&[{
&&&&&&&&&&&&&&&&name:&'Tokyo&hot',
&&&&&&&&&&&&&&&&data:&[49.9,&71.5,&106.4,&129.2,&144.0,&176.0,&135.6,&148.5,&216.4,&194.1,&95.6,&54.4]
&&&&&&&&&&&&}]
&&&&&&&&},&function&(chart)&{
&&&&&&&&&&&&SetEveryOnePointColor(chart);
&&&&&&&&});
&&&&&div&id="container"&style="width:&60%;&height:&350"&&/div&
&/html&实现颜色渐变的chart.js代码 //定义一个全局颜色数组(浅蓝色，深蓝色，浅绿色，沙棕色，深卡布色，天蓝色，沙***，宝蓝色，马棕色，灰色，闪光绿色，深灰色)
var&colorArr&=&[
&&&&&&&&&&&&&&&&'#7CB5EC',&
&&&&&&&&&&&&&&&&'#7171C6',&
&&&&&&&&&&&&&&&&'#90ED7D',
&&&&&&&&&&&&&&&&'#F7A35C',&
&&&&&&&&&&&&&&&&'#BDB76B',
&&&&&&&&&&&&&&&&'#87CEEB',&
&&&&&&&&&&&&&&&&'#E4D354',&
&&&&&&&&&&&&&&&&'#436EEE',&
&&&&&&&&&&&&&&&&'#8D4653',&
&&&&&&&&&&&&&&&&'#8B8B83',
&&&&&&&&&&&&&&&&'#00EE00',
&&&&&&&&&&&&&&&&'#B0B0B0'
&&&&&&&&&&&&&&&];
//设置每一个数据点的颜色值
&&&&function&SetEveryOnePointColor(chart)&{&&&&&&&&&&&&
&&&&&&&&//获得第一个序列的所有数据点
&&&&&&&&var&pointsList&=&chart.series[0].
&&&&&&&&//遍历设置每一个数据点颜色
&&&&&&&&for&(var&i&=&0;&i&&&pointsList.&i++)&{
&&&&&&&&&&&&chart.series[0].points[i].update({
&&&&&&&&&&&&&&&&color:&{
&&&&&&&&&&&&&&&&&&&&linearGradient:&{&x1:&0,&y1:&0,&x2:&1,&y2:&0&},&//横向渐变效果&如果将x2和y2值交换将会变成纵向渐变效果
&&&&&&&&&&&&&&&&&&&&stops:&[
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&[0,&Highcharts.Color(colorArr[i]).setOpacity(1).get('rgba')],
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&[0.5,&'rgb(255,&255,&230)'],
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&[1,&Highcharts.Color(colorArr[i]).setOpacity(1).get('rgba')]
&&&&&&&&&&&&&&&&&&&&&&&&&&&&]&&
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&});
}servlet代码package&com.
import&java.io.IOE
import&java.io.StringR
import&javax.servlet.ServletE
import&javax.servlet.ServletOutputS
import&javax.servlet.http.HttpS
import&javax.servlet.http.HttpServletR
import&javax.servlet.http.HttpServletR
import&org.apache.batik.transcoder.T
import&org.apache.batik.transcoder.TranscoderE
import&org.apache.batik.transcoder.TranscoderI
import&org.apache.batik.transcoder.TranscoderO
import&org.apache.batik.transcoder.image.JPEGT
import&org.apache.batik.transcoder.image.PNGT
import&org.apache.fop.svg.PDFT
public&class&SaveAsImage&extends&HttpServlet&{
private&static&final&long&serialVersionUID&=&1L;
public&SaveAsImage()&{
public&void&destroy()&{
super.destroy();&
public&void&doGet(HttpServletRequest&request,&HttpServletResponse&response)&throws&ServletException,&IOException&{
doPost(request,&response);
public&void&doPost(HttpServletRequest&request,&HttpServletResponse&response)&throws&ServletException,&IOException&{
request.setCharacterEncoding("UTF-8");//&设置编码
String&type&=&request.getParameter("type");
String&svg&=&request.getParameter("svg");
String&filename&=&request.getParameter("filename");
//&String&scale&=&request.getParameter("scale");
filename&=&filename&==&null&?&"chart"&:&
ServletOutputStream&out&=&response.getOutputStream();
if&(null&!=&type&&&&null&!=&svg)&{
svg&=&svg.replaceAll(":rect",&"rect");
//&定义文件后缀名
String&ext&=&"";
Transcoder&t&=&
if&(type.equals("image/png"))&{
ext&=&"png";
t&=&new&PNGTranscoder();
}&else&if&(type.equals("image/jpeg"))&{
ext&=&"jpg";
t&=&new&JPEGTranscoder();
}&else&if&(type.equals("image/svg+xml"))&{
ext&=&"svg";
}&else&if&(type.equals("application/pdf"))&{
ext&=&"pdf";
t&=&(Transcoder)&new&PDFTranscoder();
response.addHeader("Content-Disposition",&"&filename=chart."&+&ext);
response.addHeader("Content-Type",&type);
if&(null&!=&t)&{
TranscoderInput&input&=&new&TranscoderInput(new&StringReader(svg));
TranscoderOutput&output&=&new&TranscoderOutput(out);
t.transcode(input,&output);
}&catch&(TranscoderException&e)&{
out.print("编码流错误.");
e.printStackTrace();
}&else&if&(ext&==&"svg")&{
svg&=&svg.replace("http://www.w3.org/2000/svg",&"http://www.w3.org/TR/SVG11/");
out.print(svg);
out.print("Invalid&type:&"&+&type);
response.addHeader("Content-Type",&"text/html");
out.flush();
out.close();
public&void&init()&throws&ServletException&{
}web.xml配置代码&?xml&version="1.0"&encoding="UTF-8"?&
&web-app&version="2.5"&
xmlns="/xml/ns/javaee"&
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"&
xsi:schemaLocation="/xml/ns/javaee&
/xml/ns/javaee/web-app_2_5.xsd"&
&&&servlet&
&&&&&servlet-name&saveAsImage&/servlet-name&
&&&&&servlet-class&com.servlet.SaveAsImage&/servlet-class&
&&&/servlet&
&&&servlet-mapping&
&&&&&servlet-name&saveAsImage&/servlet-name&
&&&&&url-pattern&/saveAsImage&/url-pattern&
&&&/servlet-mapping&
&&&welcome-file-list&
&&&&&welcome-file&aa.jsp&/welcome-file&
&&&/welcome-file-list&
&/web-app&图表的显示与下载功能到此就OK了。& & 现在来进入本文的重点，结合json实现图表的展示。由于本人的项目中用到了struts2，所以实现图表导出为png，jpeg也是采用的action来实现了，将上面的servlet改写为struts2的action来说应该没啥难度，这里就请广大程序猿自己动手一试吧。既然用到了JSON，就需要用到相关的jar包，我这里用的是json-lib-2.1-jdk15.jar(当然，你也可以使用StringBuffer去手动拼接来实现JSON的格式，前提是你不怕麻烦，不嫌繁琐，不怕出错)，在action中，只需要简单的几句代码就能将List集合转换成JSON格式的数据,并通过out.print输出到jsp页面，具体代码如下：&&&&&&&&&&&&&&&&HttpServletResponse response = ServletActionContext.getResponse();&&&&&&&&&&&&&&&&PrintWriter out = response.getWriter();JSONArray json = JSONArray.fromObject(list);//输出json，去验证json的格式是否正确&&&&&&&&&&&&& & //System.out.println(json.toString());out.print(json.toString());控制台输出的json数据为：[{"STLC":"枝江善溪冲 ","MX":2,"Q":1.45,"WPTN":"4","STCD":"","WZ":null,"TM":"","ADMAUTH":"信息管理单位","RVNM":null,"LOCALITY":null,"STNM":"雨量站","Z":1.45}]当页面访问该action的时候，JSON格式的数据已经输出到jsp页面了。现在我们可以通过jquery的ajax方式访问action，并且在成功的回调函数返回数据，并进行解析，具体代码如下：//显示higthcharts图表&
&&function&showCharts(){
&&$.ajax({
&&&&&&&&&&type&:&'POST',
&&&&&&&&&&dataType:'json',
&&&&&&&&&&async:&false,
&&&&&&&&&&url&:'/water/water!getDayList.action',
&&&&&&&&&&data:{
&&&&&&&&&&&&&&tm:$("#w_d_l_tm").val()
&&&&&&&&&&},
&&&&&&&&&&success:function(data)&{
&&&&//遍历
$.each(data,function(i,t){
stlc=t.STLC.trim();
time=t.TM;
//初始化highcharts图表
chart&=&new&Highcharts.Chart({
renderTo&:&'container',&&&//制定图标显示的层的id
//defaultSeriesType:&'column'//柱状图&&line直线图，spline折线图，pie饼状图，area区域图，more综合图
type:'column'
//zoomType:&'xy',
&credits:&{
&//去掉右下角显示的声明&
&&&&&&&&&&&&&&&&enabled:&false&&
&&&&&&&&&&&&},
text&:&stlc+'水情日报表',&
categories&:&['水位','流量']
//Y坐标(分别有水位与流量两个)&
title&:&{text&:&'水位(m)'},
&&&&style:{color:'#89A54E'},
&&&&opposite:&false
gridLineWidth:&0,
title:&{text:&'流量(m3/s)'},
&&&&style:{color:&'#4572A7'},
&&&&opposite:&true
exporting&:&{
filename&:&'chart',
url&:&'/chartImage!chart.action'
//此处是关键点,也可以修改exporting.js中对应的url，如果不需要此功能，不写exporting即可
/*如果只需要将图表导出为指定格式的图片请使用下面的方法，即重写exporting中的一些东西
&exporting:&{
&&&&&&&&&&&&&&&&
&type:'image/png',
&&&&&&&&&&&&&&&
&&&&&url:'http://127.0.0.1:8080/yeqh/chartImg/',
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&buttons:&{
&&&&&&&&&&&&&&&&&&&&
contextButton:&{
&&&&&&&&&&&&&&&&&&&&&&&&
menuItems:&[,&{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&
text:&'导出PNG图片文件',
&&&&&&&&&&&&&&&&&&&&&&&&&&&&
onclick:&function()&{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
this.exportChart();
&&&&&&&&&&&&&&&&&&&&&&&&&&&& },
&&&&&&&&&&&&&&&&&&&&&&&&&&&&
separator:&false&
&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&
&&&&&&&&&&&&
//鼠标悬浮提示
tooltip&:&{
formatter&:&function()&{
return&this.x&+&':&'&+&this.y;
//设置图例
legend&:&{
layout&:&'vertical',&&//水平排列
//线条说明停靠位置
align&:&'right',&&
verticalAlign&:&'middle',
shadow:&true,&&//设置阴影&
borderWidth&:&0,
floating:&true,&&
plotOptions:{
&&&&column:{
pointPadding:&0.5,
&&&&&&&& borderWidth:&0,
& pointWidth:&30,&//这种柱状的宽度&
&&&&&&&&dataLabels:{
&&&&&&&&&&&&enabled:true,&//是否显示数据标签
series&:&[
name&:&'水位',
data&:[z,q]
&&&&&&&&&}
&&}jsp需要定义一个div，此div的id与上面js中的renderTo的属性要相同，&div&id="container"&style="width:&80%;&height:&400&margin-left:&&margin-right:&"&&/div&到这里，highcharts结合json显示图表已经完成，如果想要实现柱状图渐变的图标效果，请自己加上实现颜色渐变的js代码去实现。需要用的js文件与jar包请到/data/1890578自行下载。本文出自 “” 博客，请务必保留此出处
了这篇文章
类别：未分类┆阅读(0)┆评论(0)