原文出自:http://cmsblogs.com/?p=696。尊重作者的成果,转载请注明出处!
个人站点:http://cmsblogs.com
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 最近有蛮多人总是问我这个FusionCharts制表的问题,帮助他们解决之后,在昨晚发现以前整理的笔记中有这个简单教程,而且以前也发表了几篇这个博文,所以就将其全部上传上来供别人参考。如有不正确之处望指正!!!!
所谓图表上的工具提示就是当鼠标放在某个特定的数据块上时所显示的提示信息。如下:
禁用显示工具提示
在默认情况下工具提示功能是显示的,但是有时候我们并不是很想需要这个功能提示功能,这个时候我们就希望能够禁用该功能。我们可以通过设置showToolTip='0'来禁用工具提示。
自定义文本
我们可以通过<set…/>元素的tooltext属性来给某个数据点设置特定的工具提供,也就是自定义文本显示。
<graph caption='每月销售额柱形图' xAxisName='月份' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0'>
......
<set name='八月' value='544' color='588526' />
<set name='九月' value='565' color='B3AA00' />
<set name='十月' value='754' color='008ED6' toolText='销售量最大'/>
<set name='十一月' value='441' color='9D080D' />
<set name='十二月' value='654' color='A186BE' />
</graph>
自定义背景颜色和边框
对于一个白色背景、黑色文字和黑色背景而已还真不是特别的“漂亮”,好在FusionCharts提供了toolTipBorderColor和toolTipBgColor这两个属性用来帮助我们自定义工具提示的背景色和边框颜色。
<graph caption='每月销售额柱形图' xAxisName='月份' yAxisName='Units' showNames='1' toolTipBorderColor='9D080D' toolTipBgColor='F7D7D1'>
......
</graph>
对于字体的设置,我们需要使用自定义样式来进行改变。这个下面在介绍。
多行提示
如果某个工具提示的内容太多,那么这个提示信息就会显示的特别的长。
对于这样的提示信息我们是非常不愿意见到的。这里我们就希望它能够多行、分段显示。这里我们可以通过使用伪代码{BR}来进行分段处理。
使用自定义样式改变字体样式
在XML中,我们能够利用样式来改变文本的字体样式。
<graph caption='每月销售额柱形图' xAxisName='月份' yAxisName='Units' showNames='1' toolTipBorderColor='9D080D' toolTipBgColor='F7D7D1'>
<set name='一月' value='100' color='AFD8F8' />
<set name='二月' value='200' color='F6BD0F' />
.......
<set name='十二月' value='654' color='A186BE' />
<styles>
<definition>
<style name='myToolTipFont' type='font' font='Verdana' size='14' color='008ED6F'/>
</definition>
<application>
<apply toObject='ToolTip' styles='myToolTipFont' />
</application>
</styles>
</graph>
更多请阅读:
>>>>>>>FusionCharts简单教程(一)---建立第一个FusionCharts图形
>>>>>>>FusionCharts简单教程(二)-----使用js加载图像和setDataXML()加载数据
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
原文出自:http://cmsblogs.com/?p=696。尊重作者的成果,转载请注明出处!
个人站点:http://cmsblogs.com
分享到:
相关推荐
[JavaScript版]fusioncharts-suite-xt-v3.9.0,支持各种浏览器(最低IE8)。无水印。完美。包含全量地图数据fusionmaps-xt-definition.zip。
官方最新Fusioncharts 3.12.2,图表上无水印。支持最新的HTML5,跨平台。PCs, Macs, iPads, iPhones, Android devices, our JavaScript (HTML5) charts work everywhere. Heck, even on IE 6
fusioncharts最新--------------------------------------------------
showValues是否在图表显示对应的数据值,默认为1(True) yAxisMinValue指定纵轴(y轴)最小值,数字 yAxisMaxValue 指定纵轴(y轴)最小值,数字 showLimits是否显示图表限值(y轴最大、最小值),默认为1(True) 图表标题...
FusionCharts
FusionCharts图表组件简单使用
描述Fusioncharts图表工具的技术参数
FusionCharts图片保存实例 只要将此实例部署到服务器端,通过IE客户端访问test.HTML就可用 关键点是下面的脚本: <div id="chartContainer" align="center">The chart will appear within this DIV. This text will...
FusionCharts---v3.1破解版(49个swf).rar
利用FusionCharts 实现数据图表展示 利用FusionCharts 实现数据图表展示 利用FusionCharts 实现数据图表展示 利用FusionCharts 实现数据图表展示
fusionCharts导出相关资料打包,包含自动将图表导出为图片,而不再用右键单击的方式来生成图片,更便于控制
js实现图表-FusionCharts 这里支持C#,vb.net,php,jsp等开发语言,做报表是不错的选择
NULL 博文链接:https://qq85609655.iteye.com/blog/2372421
它包含广泛的图表类型,具有全方位智能的图表报告功能,动画自定义和强大的交互性。Fusioncharts XT必然会使您的应用程序看起来具有惊人的强大效果。 利用Flash和JavaScript(HTML5),FusionCharts XT功能可以实现...
FusionCharts图表工具破解版 亲测可用 用法可见官网 http://www.fusioncharts.com/
FusionCharts详细教程,帮助初学者快速入门。
具体讲述FusionCharts图表的应用及开发。
fusioncharts图表,用于统计分析,适合web开发人员,界面美观,使用简单。
FusionCharts是如何在网页呈现图表