fusioncharts同一页面显示2个仪表盘，且以java字符串作为xml数据

最新推荐文章于 2025-08-07 15:29:44 发布

weixin_33754913

最新推荐文章于 2025-08-07 15:29:44 发布

阅读量76

点赞数

CC 4.0 BY-SA版权

文章标签： java javascript ViewUI

原文链接：https://my.oschina.net/webas/blog/110622

本文介绍如何在同一页面上使用FusionCharts展示两个仪表盘图表，并通过Java字符串传递XML配置数据。演示了如何设置仪表盘的各项属性，包括颜色范围、指针样式等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么80%的码农都做不了架构师？>>>

fusioncharts同一页面显示2个仪表盘，且以java字符串作为xml数据

<%@ page contentType="text/html; charset=UTF-8" %>
<%
	String path = request.getContextPath();
%>
<%
	String xml = "<chart manageResize=\"1\" origW=\"350\" origH=\"200\"  palette=\"2\" bgAlpha=\"0\" bgColor=\"FFFFFF\" lowerLimit=\"0\" upperLimit=\"100\" numberSuffix=\"%\" showBorder=\"0\" basefontColor=\"000000\" chartTopMargin=\"5\" chartBottomMargin=\"5\"  caption=\"设备运行状态实时监控\" subCaption=\"xxxxd\" toolTipBgColor=\"009999\" gaugeFillMix=\"{dark-10},{light-70},{dark-10}\" gaugeFillRatio=\"3\" pivotRadius=\"8\" gaugeOuterRadius=\"120\" gaugeInnerRadius=\"70%\"  gaugeOriginX=\"175\" gaugeOriginY=\"170\" trendValueDistance=\"5\" tickValueDistance=\"3\" manageValueOverlapping=\"1\" autoAlignTickValues=\"1\">   <colorRange>      <color minValue=\"0\" maxValue=\"45\" code=\"FF654F\"/>      <color minValue=\"45\" maxValue=\"80\" code=\"F6BD0F\"/>      <color minValue=\"80\" maxValue=\"100\" code=\"8BBA00\"/>   </colorRange>   <dials>      <dial value=\"72\" rearExtension=\"10\" baseWidth=\"10\"/>   </dials>   <trendpoints>      <point startValue=\"62\" displayValue=\"平均值\" useMarker=\"1\" markerRadius=\"8\" dashed=\"1\" dashLen=\"2\" dashGap=\"2\"  />   </trendpoints>   <annotations>      <annotationGroup id=\"Grp1\" showBelow=\"1\" showShadow=\"1\">         <annotation type=\"rectangle\" x=\"$chartStartX+5\" y=\"$chartStartY+5\" toX=\"$chartEndX-5\" toY=\"$chartEndY-5\" radius=\"10\" fillColor=\"009999,333333\" showBorder=\"0\" />      </annotationGroup>   </annotations>   <styles>      <definition>         <style name=\"RectShadow\" type=\"shadow\" strength=\"3\"/>		 <style name=\"trendvaluefont\" type=\"font\" bold=\"1\" borderColor=\"#00cccc\"/>      </definition>      <application>         <apply toObject=\"Grp1\" styles=\"RectShadow\" />		 <apply toObject=\"Trendvalues\" styles=\"trendvaluefont\" />      </application>   </styles></chart>";
%>
<HTML>
<HEAD>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<TITLE>FusionCharts - Multiple Charts on one Page</TITLE>
<SCRIPT LANGUAGE="Javascript" SRC="<%=path%>/frameworks/FusionCharts/FusionCharts.js"></SCRIPT>
<script type="text/javascript">
var contextpath = "<%=path%>";
var xml = '<%=xml%>';
</script>
<style type="text/css">
	body {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 12px;
	}
</style>
</HEAD>
<BODY>
<div id="chartdiv1" align="center" class="text">
<script type="text/javascript">
	var myChart1 = new FusionCharts(contextpath+"/frameworks/FusionCharts/AngularGauge.swf", "myChartId1", "330", "300", "0", "0");
	myChart1.setDataXML(xml);
	myChart1.render("chartdiv1"); 
</script>
<div id="chartdiv2" align="center" class="text">
<script type="text/javascript">
	var myChart2 = new FusionCharts(contextpath+"/frameworks/FusionCharts/AngularGauge.swf", "myChartId2", "330", "300", "0", "0");
	myChart2.setDataXML(xml);
	myChart2.render("chartdiv2"); 
</script>
</BODY>
</HTML>

转载于:https://my.oschina.net/webas/blog/110622