fusioncharts如何运用
来源:互联网 发布:空间怎么绑定域名 编辑:程序博客网 时间:2024/04/27 13:25
<span style="font-size:18px;">fusioncharts是一个很使用的网页报表插件,通过它可以满足各种各样的表格需要而且样式也肯酷。</span>
这里是fusioncharts的下载地址http://www.fusioncharts.com/download/。
接下来就看看它是如何完成一个图表的:
我用的是myeclipse所以就用的web项目做的,首先创建web项目。
然后创建fusioncharts文件夹把压缩包下js文件夹里所有的文件考过来。
在index.jsp中导入js,第一个是必要的js,第二个是主题js。
<script type="text/javascript" src="fusioncharts/fusioncharts.js"></script><script type="text/javascript"src="fusioncharts/themes/fusioncharts.theme.fint.js"></script><script type="text/javascript">
<div id="chartContainer">FusionCharts XT will load here!</div>
接下来是关键,自定义图表。
<script type="text/javascript">FusionCharts.ready(function() {var revenueChart = new FusionCharts({"type" : "column3d","renderAt" : "chartContainer","width" : "500","height" : "300","dataFormat" : "json","dataSource" : {"chart" : {"caption" : "Monthly revenue for last year","subCaption" : "Harry's SuperMart","xAxisName" : "Month","yAxisName" : "Revenues (In USD)","theme" : "fint"},"data" : [ {"label" : "Jan","value" : "420000"}, {"label" : "Feb","value" : "810000"}, {"label" : "Mar","value" : "720000"}, {"label" : "Apr","value" : "550000"}, {"label" : "May","value" : "910000"}, {"label" : "Jun","value" : "510000"}, {"label" : "Jul","value" : "680000"}, {"label" : "Aug","value" : "620000"}, {"label" : "Sep","value" : "610000"}, {"label" : "Oct","value" : "490000"}, {"label" : "Nov","value" : "900000"}, {"label" : "Dec","value" : "730000"} ]}});revenueChart.render();});</script>
type是图表的类型。
renderAt是在那个控件上显示图表,值是控件的id。
width宽度。
height高度。
dataFormat数据格式json/xml。
dataSource数据源。
chart表格的参数:caption标题、subCaption副标题、xAxisName横轴名称、yAxisName纵轴名称、theme主题。
data具体数据。
这样一个简单的3D柱状图表就完成了。
0 0
- fusioncharts如何运用
- fusioncharts的实际运用
- FusionCharts 如何显示中文
- 如何运用
- FusionCharts
- FusionCharts
- fusionCharts
- FusionCharts
- fusioncharts
- FusionCharts
- FusionCharts
- FusionCharts
- FusionCharts
- 在Winform中运用FusionCharts图表(一)
- 在Winform中运用FusionCharts图表(二)
- 在winform中运用FusionCharts图表(一)
- 在winform中运用FusionCharts图表(二)
- 如何在PHP中使用FusionCharts
- C Language Study - 内存分区
- java中注解的使用与实例
- Find Peak Element☆
- Hibernate中什么是懒加载异常?该怎么处理懒加载异常?
- 《超体》《阿凡达》中的脑电波技术能成为现实吗
- fusioncharts如何运用
- GetLastError
- 关于大型网站技术演进的思考(十五)--网站静态化处理—前后端分离—中(7)
- pat 1063
- 安卓 自定义的 SharedPreference 工具类
- 20150302学习笔记
- 自己常用的maven项目中pom的配置
- 用Redis bitmap统计活跃用户、留存
- 小马哥----另类高仿红米 单 双卡机型详细拆机外观图与开机界面图 所谓的4G版机型,切勿与高仿红米互刷