简单使用FusionCharts(Free)[通俗易懂]

2022-09-07 15:41:43 浏览数 (1)

大家好，又见面了，我是你们的朋友全栈君。

介绍

FusionCharts Free 是一个跨平台，跨浏览器的flash图表组件解决方案，能够被 ASP．NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, 简单 HTML 页面甚至PPT调用。并提供互动性和强大的图表，使用XML作为其数据接口，FusionCharts充分利用流体美丽的Flash创建紧凑，互动性和视觉逮捕图表。

优点

1、有动画和后台交互比较方便(ajax)；

2、运行在各种平台；

3、最重要的就是使用简单

开始使用

前台javascript代码(FusionCharts参数不全)

代码语言：javascript复制
     function showChart() {
            $.get("Handler1.ashx", "",
              function (data) {
                  var chatr = new FusionCharts("../Charts/FCF_Line.swf", "s2Chart", "500", "400");
                  /*FusionCharts参数
                   *第一个 指定Flash
                   *给图表一个id不能重复（一个页面多个图表的时候）
                   *flash的宽度
                   *flash的高度
                   */
                  chatr.setDataXML(data);  //设置文件的xml地址或者字符串
                  chatr.render("div1");    //渲染到id为div1的div中
              });
        }

xml格式

代码语言：javascript复制
<graph caption='Monthly Unit Sales' xaxisname='Month' yaxisname='Units' shownames='1'
        decimalprecision='0' formatnumberscale='0'>
  <set name='1' value='422' color='AFD8F8' ></set>
  <set name='2' value='857' color='F6BD0F' ></set>
  <set name='3' value='671' color='8BBA00' ></set>
  <set name='4' value='494' color='FF8E46' ></set>
  <set name='5' value='761' color='008E8E' ></set>
  <set name='6' value='960' color='D64646' ></set>
  <set name='7' value='629' color='8E468E' ></set>
  <set name='8' value='622' color='588526' ></set>
  <set name='9' value='376' color='B3AA00' ></set>
  <set name='10' value='494' color='008ED6'></set>
  <set name='11' value='761' color='9D080D'></set>
  <set name='12' value='960' color='A186BE'></set>
</graph>

FusionCharts常用的属性

属性

描述

图表和轴的标题及动画等

caption

标题

subcaption

副标题

xaxisname

X轴的名字

yAxisName

y轴的名字

animation

动画是否开启 bool类型

rotatevalues

显示的值形状 竖式1 横是0

flash背景参数

bgColor

设置flash的背景颜色

bgSWF

设置一个外部的Flash 为flash的背景

图表背景参数

canvasBgColor

设置图表背景的颜色

canvasBaseColor

设置图表基部的颜色

canvasBaseDepth

设置图表基部的高度

showCanvasBg

设置是否显示图表背景

showCanvasBase

设置是否显示图表基部

yAxisMinValue

y轴最小值

yAxisMaxValue

y轴最大值

字体属性

baseFont

设置字体样式

baseFontSize

设置字体大小

baseFontColor

设置字体颜色

outCnvBaseFont

设置图表外侧的字体样式

outCnvBaseFontSze

设置图表外侧的字体大小

outCnvBaseFontColor

设置图表外侧的字体颜色

数字格式选项

numberPrefix

设置数据值的前缀

numberSuffix

设置数据值的后缀

formatNumber

设置是否格式化数据

formatNumberScale

格式化数据 默认为1 自动格式化 0 不格式化

decimalSeparator

用指定的字符来代替小数点

thousandSeparator

用指定的字符来代替千位分隔符

decimalPrecision

设置十进制的精度

divLineDecimalPrecision

设置y轴数值的小数位数

limitsDecimalPrecision

设置y轴的最大最小值的小数位数

水平分隔线

numdivlines

设置水平分隔线的数量

divlinecolor

设置水平分隔线的宽度

divLineAlpha

设置水平分隔线的透明度

showDivLineValue

设置是否显示水平分隔线的数值

鼠标旋停参数

showhovercap

显示是否激活鼠标旋停效果

hoverCapBgColor

设置鼠标旋停效果的背景颜色

hoverCapBorderColor

设置鼠标旋停效果的边框颜色

hoverCapSepChar

设置鼠标旋停后显示的文本中的分隔符号

图表边距的设置

chartLeftMargin

设置图表左边距

chartRightMargin

设置图表右边距

chartTopMargin

设置图表上边距

chartBottomMargin

设置图表下边距

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/154430.html原文链接：https://javaforall.cn

编程算法 css java flash canvas

0 人点赞