中的工具提示是什么?当鼠标悬停在一个特定的数据点上时就会显示工具提示,提示以下信息:

  1. 单系列图表(饼图和圆环除外):名称及数值
  2. Pie & Doughnut:名称及数值/百分比
  3. 多系列组合图表:系列名称,类别名称,数据值

如何禁用FusionCharts图表中的工具提示?

你可以通过设置showToolTip='0'来禁用工具提示。

例如:

<chart showToolTip='0'...>

如何在FusionCharts图表中设置数据点的自定义文本?

你可以利用<set>元素中的tooltext属性来为数据点设置自定义工具提示。

例如:

<chart caption='Monthly Revenue' xAxisName='Month' 
yAxisName='Revenue' numberPrefix='$ showValues='0'>
<set label='Jan' value='220000' toolText='Highest'/>
<set label='Feb' value='90000' />
...
</chart>

结果如下:

如何自定义FusionCharts图表的背景色和边框颜色?

你可以利用<chart>元素中的toolTipBorderColor 属性和toolTipBgColor属性来自定义背景色和边框颜色。颜色不应该包括'#'符号。

例如:

<chart ... toolTipBorderColor='6D86D5' toolTipBgColor='F7D7D1' >

结果如下:

如何利用样式来指定FusionCharts图表中工具提示文本的字体样式?

使用样式,您可以设置图表中不同文本的个别字体属性。

例如:

在给定的XML中,我们利用样式定义了工具提示中的字体属性。

<chart caption='Quarterly Sales Summary' subcaption='Figures in 
xAxisName='Quarter' yAxisName='Sales' showValues='0' >
<set label='Qtr 1' value='420500' />
<set label='Qtr 2' value='295400' />
<set label='Qtr 3' value='523400' />
<set label='Qtr 4' value='465400' />
<styles>
<definition>
<style name='myToolTipFont' type='font' 
font='Verdana' size='12' color='C57B64'/>
</definition>
<application>
<apply toObject='ToolTip' styles='myToolTipFont' />
</application>
</styles>
</chart>

如何在FusionCharts图表中显示多行工具提示?

FusionCharts v3 允许您利用细微的手动添加多行提示工具,例如:

<chart>
<set label='John' value='420' tooltext='John Miller{br}Score: 420{br}Rank:2'/>
<set label='Mary' value='295' tooltext='Mary Evans{br}Score: 295{br}Rank:3'/>
<set label='Tom' value='523' tooltext='Tom Bowler{br}Score: 523{br}Rank:1'/>
</chart>

在上面的XML中,我们用伪代码{BR},在工具提示中添加一个换行符。图表输出结果如下:

 
 

如何自定义FusionCharts图表上的工具提示?的更多相关文章

  1. FusionCharts简单教程(三)-----如何自定义图表上的工具提示

    最近有蛮多人总是问我这个FusionCharts制表的问题,帮助他们解决之后,在昨晚发现以前整理的笔记中有这个简单教程,而且以前也发表了几篇这个博文,所以就将其全部上传上来供别人参考.如有不正确之处望 ...

  2. FusionCharts简单教程(六)-----如何自定义图表上的工具提示

          所谓图表上的工具提示就是当鼠标放在某个特定的数据块上时所显示的提示信息.如下: 禁用显示工具提示       在默认情况下工具提示功能是显示的,但是有时候我们并不是很想需要这个功能提示功能 ...

  3. FusionCharts图表控件中文版使用手册

    三要素:swf.data.xml.承载图表的载体 1.Swf: 按照你所设计的图表类型加载相应的.swf文件到你的工程即可(eg:若你想生成一张二维柱状图,那么在你的工程里就必须包含Column2D. ...

  4. 二十三、【开源】EFW框架Web前端开发之常用组件(FusionCharts图表、ReportAll报表等)

    回<[开源]EFW框架系列文章索引>        EFW框架源代码下载V1.2:http://pan.baidu.com/s/1hcnuA EFW框架实例源代码下载:http://pan ...

  5. 关于FusionCharts图表宽度width的设置问题导致图表显示异常的解决办法

    关于FusionCharts图表宽度width的设置问题导致图表显示异常的解决办法 题设: 经常使用FusionCharts图表的朋友可能会遇到这个问题.就是在FusionCharts显示的时候有时候 ...

  6. WPF 自定义的图表(适用大量数据绘制)下

    原文:WPF 自定义的图表(适用大量数据绘制)下 上一篇文章中讲了WPF中自定义绘制大量数据的图标,思路是先将其绘制在内存,然后一次性加载到界面,在后续的调试过程中,发现当数据量到达10W时,移动鼠标 ...

  7. AGS API for JavaScript 图表上地图

    原文:AGS API for JavaScript 图表上地图 图1 图2 图3 -------------------------------------华丽丽的分割线--------------- ...

  8. vue里在自定义的组件上定义的事件

    事件分为原生事件和自定义事件. vue里在自定义的组件上定义的事件,都被认为是自定义事件,必须用$emit()来触发. 这也是子组件向父传值的原理. 如果想作为原生事件,需要在原生事件后面加上.nat ...

  9. echarts 取消图例上的点击事件和图表上鼠标滑过点击事件

    备注:标黄的代码是起作用的代码,其他的不需要借鉴!!! //取消 鼠标滑过的提示框 tooltip : {         trigger: 'item',      show:false,      ...

随机推荐

  1. 【awesome-dotnet-core-learning】(2)-Sprache.Calc-表达式计算器

    [awesome-dotnet-core-learning](2)-Sprache.Calc-表达式计算器 示例代码托管在GITHUB上, 欢迎STAR! 严格来说, Sprache.Calc只是上一 ...

  2. KM算法及其应用

    在二分图匹配中有最大匹配问题,使用匈牙利算法或者网络流相关算法解决,如果给每条边增加一个权值,求权值和最大的匹配方案就叫做最大权匹配问题.其实之前所说的最大匹配就是权值为1的最大权匹配. 求最大权完备 ...

  3. [转]VS Code 扩展 Angular 6 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout

    本文转自:https://marketplace.visualstudio.com/items?itemName=Mikael.Angular-BeastCode VSCode Angular Typ ...

  4. IdentityServer4关于多客户端和API的最佳实践【含多类型客户端和API资源,以及客户端分组实践】【下】

    经过前两篇文章你已经知道了关于服务器搭建和客户端接入相关的基本资料,本文主要讲述整个授权系统所服务的对象,以ProtectApi资源为演示 目标: 1)实现多资源服务器针对请求的token校验,接入I ...

  5. 【Java并发编程】17、SynchronousQueue源码分析

    SynchronousQueue是一种特殊的阻塞队列,不同于LinkedBlockingQueue.ArrayBlockingQueue和PriorityBlockingQueue,其内部没有任何容量 ...

  6. vi命令详解2

    介绍 vi编辑器是所有Unix及Linux系统下标准的编辑器,它的强大不逊色于任何最新的文本编辑器,这里只是简单地介绍一下它的用法和一小部分指令. 1.vi的基本概念 vi可以分为三种状态,分别如下: ...

  7. 通过AccessKey调用阿里云CDN接口刷新CDN资源案例

    通过AccessKey远程调用阿里云CDN接口,快速实现自动化集成部署. CdnService.java package com.nfky.cdn; import com.aliyuncs.Defau ...

  8. canvas处理压缩照片并回显:https://cengjingdeshuige.oss-cn-beijing.aliyuncs.com/20180512/cannovs%E5%AD%A6%E4%B9%A0.html

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. CSS图片两端对齐,自适应列表布局末行对齐修复实例页面

    写在前面 前端开发,图片两端对齐,是十分常见的,也是十分痛苦的,我试过好多方法,通过整理,认为下面还是比较靠谱的,在实践中大家可以试试,欢迎一起学习,一起进步 HTML代码 HTML代码非常简单,用的 ...

  10. Docker 修改存储路径

    Docker 版本 1.13 及以下 systemctl stop docker.service cp /usr/lib/systemd/system/docker.service /home/doc ...