SunshineCharts 饼图教程(最简单的flex Charts)

最新推荐文章于 2014-10-15 16:12:13 发布

原创最新推荐文章于 2014-10-15 16:12:13 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#charts #flex #string #stylesheet #html #encoding

JAVA开发技能同时被 2 个专栏收录

49 篇文章

订阅专栏

Flex开发技能

39 篇文章

订阅专栏

本文提供了一篇关于如何使用SunshineCharts制作饼图的教程，详细解释了包括调试模式、图例显示、自动刷新政策在内的配置项，并展示了XML数据格式、HTML嵌入模式以及JAVA代码的使用方法。

SunshineCharts 是一个比较简单实用的报表，它的部署教程和简单实用教程如下：

http://blog.youkuaiyun.com/arjick/article/details/6702268

这篇文章主要教大家如何实用SunshineCharts 的饼图。

饼图数据xml：

<?xml version="1.0" encoding="UTF-8"?>

<data debug="off" showDataTips="true" legend="true"
	autoRefreshPolicy="off" labelPosition="none" autoRefreshTime="180"
	title="" showAllDataTips="false" clickType="pop" backGroudColor="0xffffff">
	<node value="31403000" label="未知_8小时43分钟23秒" description="未知_8小时43分钟23秒"
		color="0x454926" />
	<node value="8728000" label="可用_2小时25分钟28秒" description="可用_2小时25分钟28秒"
		color="0x00ff00" />
	<node value="360000" label="不可用_6分钟" description="不可用_6分钟" color="0x000000" />
</data>

1、data

debug:是否开启调试模式

showDataTips：饼图是否显示快速提示

legend：是否显示图例：

autoRefreshPolicy：是否启动自动刷新

labelPosition：块石提示位置

title：标题

showAllDataTips:是否显示所有提示

clickType：点击饼图效果

backGroudColor：底色

2、node

value：方块数值

label：方块标签名称

description：方块颜色

color：方块颜色

HTML嵌入模式：

html源代码

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			width="100%" height="100%" id="pieChart">
			<param name="movie" value="SunshineCharts.swf" />
			<param name="quality" value="high" />
			<param name="bgcolor" value="#ffffff" />
			<param name="allowScriptAccess" value="sameDomain" />
			<param name="allowFullScreen" value="true" />
			<param name="flashvars"
				value="type=pieChart&dataUrl=xml/PieChartData.xml&cleanCache=off" />
			<!--[if !IE]>-->
			<object type="application/x-shockwave-flash"
				data="SunshineCharts.swf" width="100%" height="100%">
				<param name="quality" value="high" />
				<param name="bgcolor" value="#ffffff" />
				<param name="allowScriptAccess" value="sameDomain" />
				<param name="allowFullScreen" value="true" />
				<param name="flashvars"
					value="type=pieChart&dataUrl=xml/PieChartData.xml&cleanCache=off" />
				<!--<![endif]-->
				<!--[if gte IE 6]>-->
				<p>
					Either scripts and active content are not permitted to run or Adobe
					Flash Player version 10.0.0 or greater is not installed.
				</p>
				<!--<![endif]-->
				<a href="http://www.adobe.com/go/getflashplayer"> <img
						src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
						alt="Get Adobe Flash Player" /> </a>
				<!--[if !IE]>-->
			</object>
			<!--<![endif]-->
		</object>

Tag嵌入代码：

<%@ page language="java" import="java.util.*" pageEncoding="Utf-8"%>
<%@taglib uri="/WEB-INF/chartsTagLib" prefix="chart"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>PieCharts</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">
		<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

	</head>

	<body>
		<chart:flashTag  id="pieChart" type="pieChart"
			dataUrl="xml/PieChartData.xml" flashUrl="SunshineCharts.swf"
			cleanCache="off" width="300" height="320" />
	</body>
</html>

JAVA代码：

package com.shine.framework.Charts.cofferCharts.PieCharts;

public class PieChartExample {

	/**
	 * 饼图使用例子
	 * 
	 * @param args
	 */
	public static void main(String[] args) {
		PieChartsHelper helper = new PieChartsHelper();
		helper.addPieChart("p1", 10, "0xffff00", "饼1");
		helper.addPieChart("p2", 10, "0xff00ff", "饼2");
		helper.addPieChart("p3", 10, "0x00ffff", "饼3");

		System.out.println(helper.getDataXml());
	}
}

数据生成类源代码

package com.shine.framework.Charts.cofferCharts.PieCharts;

import java.util.ArrayList;
import java.util.List;

import org.dom4j.Document;
import org.dom4j.DocumentHelper;
import org.dom4j.Element;

import com.shine.framework.Charts.cofferCharts.LineCharts.Line;
import com.shine.framework.core.util.XmlUitl;

public class PieChartsHelper {
	private String title = "";
	private String autoRefreshPolicy = "on";
	private String autoRefreshTime = "180";
	private String debug = "off";
	private String clickType = "pop";
	private String backGroudColor = "0xffffff";
	private String showDataTips = "true";
	private String showAllDataTips = "false";
	private String labelPosition = "callout";
	private String legend = "true";

	private List<PieChartModel> pieList = null;

	public PieChartsHelper() {
		pieList = new ArrayList<PieChartModel>();
	}

	/**
	 * 加入饼图块
	 * 
	 * @param label
	 * @param value
	 * @param color
	 * @param description
	 */
	public void addPieChart(String label, int value, String color,
			String description) {
		PieChartModel model = new PieChartModel(label, value, color,
				description);
		pieList.add(model);
	}

	public String getDataXml() {
		Document document = DocumentHelper.createDocument();
		Element dataElement = document.addElement("data");
		dataElement.addAttribute("title", title);
		dataElement.addAttribute("autoRefreshPolicy", autoRefreshPolicy);
		dataElement.addAttribute("autoRefreshTime", autoRefreshTime);
		dataElement.addAttribute("debug", debug);
		dataElement.addAttribute("backGroudColor", backGroudColor);
		dataElement.addAttribute("clickType", clickType);
		dataElement.addAttribute("showDataTips", showDataTips);
		dataElement.addAttribute("showAllDataTips", showAllDataTips);
		dataElement.addAttribute("labelPosition", labelPosition);
		dataElement.addAttribute("legend", legend);

		for (PieChartModel model : pieList) {
			Element nodeElement = dataElement.addElement("node");
			nodeElement.addAttribute("label", model.getLabel());
			nodeElement.addAttribute("value", String.valueOf(model.getValue()));
			nodeElement.addAttribute("color", model.getColor());
			nodeElement.addAttribute("description", model.getDescription());
		}

		return XmlUitl.doc2String(document);
	}

	public String getTitle() {
		return title;
	}

	public void setTitle(String title) {
		this.title = title;
	}

	public String getAutoRefreshPolicy() {
		return autoRefreshPolicy;
	}

	public void setAutoRefreshPolicy(String autoRefreshPolicy) {
		this.autoRefreshPolicy = autoRefreshPolicy;
	}

	public String getAutoRefreshTime() {
		return autoRefreshTime;
	}

	public void setAutoRefreshTime(String autoRefreshTime) {
		this.autoRefreshTime = autoRefreshTime;
	}

	public String getDebug() {
		return debug;
	}

	public void setDebug(String debug) {
		this.debug = debug;
	}

	public String getClickType() {
		return clickType;
	}

	public void setClickType(String clickType) {
		this.clickType = clickType;
	}

	public String getBackGroudColor() {
		return backGroudColor;
	}

	public void setBackGroudColor(String backGroudColor) {
		this.backGroudColor = backGroudColor;
	}

	public String getShowDataTips() {
		return showDataTips;
	}

	public void setShowDataTips(String showDataTips) {
		this.showDataTips = showDataTips;
	}

	public String getShowAllDataTips() {
		return showAllDataTips;
	}

	public void setShowAllDataTips(String showAllDataTips) {
		this.showAllDataTips = showAllDataTips;
	}

	public String getLegend() {
		return legend;
	}

	public void setLegend(String legend) {
		this.legend = legend;
	}

	public String getLabelPosition() {
		return labelPosition;
	}

	public void setLabelPosition(String labelPosition) {
		this.labelPosition = labelPosition;
	}

}

效果图：