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

最新推荐文章于 2025-10-23 01:27:25 发布

原创最新推荐文章于 2025-10-23 01:27:25 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#charts #flex #string #stylesheet #html #aix

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 title="" autoRefreshPolicy="on" autoRefreshTime="180" debug="off"
	backGroudColor="0xffffff" verticalTitle="price" horizontalTitle="date"
	type="clustered" showDataTips="true" showAllDataTips="false" legend="true">
   <columns>
      <column value="colunms1" label="线1" color="0x00ffff"/>
      <column value="colunms2" label="线1" color="0xffff00"/>
   </columns>
   <node label="1" colunms1="100" colunms2="200"/>
   <node label="2" colunms1="300" colunms2="0"/>
   <node label="3" colunms1="100" colunms2="500"/>
</data>

1、data

debug:是否开启调试模式

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

legend：是否显示图例：

autoRefreshPolicy：是否启动自动刷新

labelPosition：块石提示位置

title：标题

showAllDataTips:是否显示所有提示

clickType：点击饼图效果

backGroudColor：底色

2、node

label：x标签名称

colunms1：柱子1的值

colunms2：柱子2的值

3、column

value：柱子的名称主要和node对应

label：柱子的描述

color：柱子的颜色

HTML嵌入模式：

html源代码

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			width="100%" height="100%" id="columnChart">
			<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=columnChart&dataUrl=xml/ColumnsChartData.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=columnChart&dataUrl=xml/ColumnsChartData.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>ColmnsCharts</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="colmnsChart" type="columnChart"
			dataUrl="xml/ColumnsChartData.xml" flashUrl="SunshineCharts.swf"
			cleanCache="off" width="100%" height="100%" />
	</body>
</html>

JAVA代码：

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

import com.shine.framework.Charts.cofferCharts.LineCharts.Line;
import com.shine.framework.Charts.cofferCharts.LineCharts.LineChartsHelper;

public class ColumnsChartsExample {

	/**
	 * 柱图例子
	 * 
	 * @param args
	 */
	public static void main(String[] args) {
		Colunms colunms = new Colunms("colunms1", "线1", "0x00ffff");
		colunms.put("1", 100);
		colunms.put("2", 300);
		colunms.put("3", 100);

		Colunms colunms1 = new Colunms("colunms2", "线1", "0xffff00");
		colunms1.put("1", 200);
		colunms1.put("3", 500);

		ColumnsChartsHelper helper = new ColumnsChartsHelper();
		helper.addAix("1", "2", "3");
		helper.addColunms(colunms);
		helper.addColunms(colunms1);

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

	}

}

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

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

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

import com.shine.framework.core.util.XmlUitl;

public class ColumnsChartsHelper {
	private List<Colunms> columnsChartsList = null;
	private List<String> aixList = null;

	private String title = "";
	private String autoRefreshPolicy = "on";
	private String autoRefreshTime = "180";
	private String debug = "off";
	private String backGroudColor = "0xffffff";
	private String verticalTitle = "";
	private String horizontalTitle = "";
	private String type = "clustered";
	private String showDataTips = "true";
	private String showAllDataTips = "false";
	private String legend = "true";

	public ColumnsChartsHelper() {
		columnsChartsList = new ArrayList<Colunms>();
		aixList = new ArrayList<String>();
	}

	public void addColunms(Colunms colunms) {
		columnsChartsList.add(colunms);
	}

	public void addAix(String... aix) {
		for (String s : aix)
			if (!aixList.contains(s))
				aixList.add(s);
	}

	/**
	 * 输出xml数据
	 * 
	 * @return
	 */
	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("verticalTitle", verticalTitle);
		dataElement.addAttribute("horizontalTitle", horizontalTitle);
		dataElement.addAttribute("type", type);
		dataElement.addAttribute("showDataTips", showDataTips);
		dataElement.addAttribute("showAllDataTips", showAllDataTips);
		dataElement.addAttribute("legend", legend);
		Element linesElement = dataElement.addElement("columns");
		for (Colunms colunms : columnsChartsList) {
			Element lineElement = linesElement.addElement("column");
			lineElement.addAttribute("value", colunms.getValue());
			lineElement.addAttribute("label", colunms.getLabel());
			lineElement.addAttribute("color", colunms.getColor());
		}

		for (String s : aixList) {
			Element nodeElement = dataElement.addElement("node");
			nodeElement.addAttribute("label", s);
			for (Colunms colunms : columnsChartsList) {
				if (colunms.get(s) != null) {
					nodeElement.addAttribute(colunms.getValue(), String
							.valueOf(colunms.get(s)));
				} else {
					nodeElement.addAttribute(colunms.getValue(), "0");
				}
			}

		}
		return XmlUitl.doc2String(document);
	}

	public void clean() {
		columnsChartsList.clear();
		aixList.clear();
	}

	public List<Colunms> getColumnsChartsList() {
		return columnsChartsList;
	}

	public void setColumnsChartsList(List<Colunms> columnsChartsList) {
		this.columnsChartsList = columnsChartsList;
	}

	public List<String> getAixList() {
		return aixList;
	}

	public void setAixList(List<String> aixList) {
		this.aixList = aixList;
	}

	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 getBackGroudColor() {
		return backGroudColor;
	}

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

	public String getVerticalTitle() {
		return verticalTitle;
	}

	public void setVerticalTitle(String verticalTitle) {
		this.verticalTitle = verticalTitle;
	}

	public String getHorizontalTitle() {
		return horizontalTitle;
	}

	public void setHorizontalTitle(String horizontalTitle) {
		this.horizontalTitle = horizontalTitle;
	}

	public String getType() {
		return type;
	}

	public void setType(String type) {
		this.type = type;
	}

	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;
	}
	
	
}

效果图：