Highchart :tooltip工具提示
2016-01-06 10:36
281 查看
Highcharts翻译系列之十六:tooltip工具提示
tooltip工具提示
参数
描述
默认值
animation
启用或禁用提示的动画。这对大数据量的图表很有用
true
backgroundColor
提示的背景色或者渐变色
rgba(255 255, 255, 0.85)
borderColor
提示的边框颜色
auto
borderRadius
边框圆角的半径
5.0
borderWidth
边框的宽度
2.0
crosshairs
显示十字线,把点和它们的轴值连接起来。十字线可以是Boolean,或者Boolean数组,或者是一个对象
null
enabled
启用或禁用提示
true
footerFormat
附加到提示格式的字符串
null
formatter
回调函数用来格式化提示的文本
positioner
一个回调函数,用来在默认位置放置提示。
null
shadow
是否显示提示的下降阴影
true
shared
当提示是共享的,整个绘图区将捕获鼠标的移动。所有序列类型的排序数据的提示文本将会显示在一个气泡(提示框)中。
false
snap
图表或单个点的感应单元。不适合条状图、柱状图和饼图切片。对于鼠标供电设备的默认值时10,对于触摸设备的默认值时25。
null
style
提示的CSS样式。
style: {color:'#333333',
fontSize: '9pt',
padding: '5px'}
useHTML
是否使用HTML代替SVG来渲染提示的内容
false
valueDecimals
每个序列的y值显示多少小数位
保存所有小数
valuePrefix
附加到序列y值的前缀
null
valueSuffix
附加到序列y值的后缀
null
xDateFormat
如果x轴是时间轴,显示在提示头部的日期格式。
基于每个点的最小距离的大约数
highcharts方面的知识很多:
http://api.highcharts.com/highcharts
http://www.highcharts.com/
http://www.52wulian.org/highcharts_api/
现在来看看我们项目中的需求吧,先明白需求才能改进啊。
当你移动到一个数据点的时候,tooltip自动提示相应的信息。但是项目中需要异步获取对此数据点的评论然后显示。
实现需求的步骤:
(0)API文档HighCharts结构如下
?
(1)研究tooltip相应的属性:
主要的参数formatter:
?
这就是tooltip提示信息的内容。那要是直接把异步获取的信息的代码直接加到其中不就行了?
获取数据时异步的,tooltip中的formatter直接就返回值了,并没有等待异步加载的数据。
(2)既然直接向tooltip增加内容不可以,可以自己写一个div,然后显示评论信息,div然后随着数据点位置的改变而改变而改变位置。
highcharts的events只有click,mouseOver,mouseOut事件。
步骤:
(3)首先自己写个div
<div id="reporting"></div>
(4)div的样式
?
(5)重写 mouseOver(主要就是获取数据,并且显示), mouseOut(隐藏div)事件
?
注意:后获取数据点位置的时候,废了很大的劲,这方面的资料很少,只能自己研究highcharts的源码。
pointer.x是x轴的值,pointer.y是y轴的值,和位置并没有任何关系。
pointer.plotX,pointer.plotY是数据点的位置。本来一开始想获取tooltip的位置,搞了半天发现[b]tooltip相应信息保存到[/b]tooltipPoints数组中,tooltipPoints是一个对象,里面保存了每一个数据点的tooltip提示信息的属性。难点是还需要研究index值是怎么来的,获取数据点相应的tooltip在tooltipPoints索引。
(6)默认的div隐藏
?
好了,现在看看样子吧:
tooltip工具提示
参数
描述
默认值
animation
启用或禁用提示的动画。这对大数据量的图表很有用
true
backgroundColor
提示的背景色或者渐变色
rgba(255 255, 255, 0.85)
borderColor
提示的边框颜色
auto
borderRadius
边框圆角的半径
5.0
borderWidth
边框的宽度
2.0
crosshairs
显示十字线,把点和它们的轴值连接起来。十字线可以是Boolean,或者Boolean数组,或者是一个对象
null
enabled
启用或禁用提示
true
footerFormat
附加到提示格式的字符串
null
formatter
回调函数用来格式化提示的文本
positioner
一个回调函数,用来在默认位置放置提示。
null
shadow
是否显示提示的下降阴影
true
shared
当提示是共享的,整个绘图区将捕获鼠标的移动。所有序列类型的排序数据的提示文本将会显示在一个气泡(提示框)中。
false
snap
图表或单个点的感应单元。不适合条状图、柱状图和饼图切片。对于鼠标供电设备的默认值时10,对于触摸设备的默认值时25。
null
style
提示的CSS样式。
style: {color:'#333333',
fontSize: '9pt',
padding: '5px'}
useHTML
是否使用HTML代替SVG来渲染提示的内容
false
valueDecimals
每个序列的y值显示多少小数位
保存所有小数
valuePrefix
附加到序列y值的前缀
null
valueSuffix
附加到序列y值的后缀
null
xDateFormat
如果x轴是时间轴,显示在提示头部的日期格式。
基于每个点的最小距离的大约数
highcharts方面的知识很多:
http://api.highcharts.com/highcharts
http://www.highcharts.com/
http://www.52wulian.org/highcharts_api/
现在来看看我们项目中的需求吧,先明白需求才能改进啊。
当你移动到一个数据点的时候,tooltip自动提示相应的信息。但是项目中需要异步获取对此数据点的评论然后显示。
实现需求的步骤:
(0)API文档HighCharts结构如下
?
参数名 | 说明 | 默认值 |
---|---|---|
enable | 是否显示提示框 | true |
backgroundColor | 设置提示框的背景色 | “top” |
borderColor | 提示框边框颜色 | “auto” |
borderRadius | 提示框圆角度/td> | 5 |
style | css样式 | style: { color: ‘#333333′, fontSize: ’9pt’, padding: ’5px’} |
formatter | 回调函数,用于格式化输出提示框的显示内容 返回的内容支持html标签如:<b>, <strong>,<br/> |
?
获取数据时异步的,tooltip中的formatter直接就返回值了,并没有等待异步加载的数据。
(2)既然直接向tooltip增加内容不可以,可以自己写一个div,然后显示评论信息,div然后随着数据点位置的改变而改变而改变位置。
highcharts的events只有click,mouseOver,mouseOut事件。
步骤:
(3)首先自己写个div
<div id="reporting"></div>
(4)div的样式
?
?
pointer.x是x轴的值,pointer.y是y轴的值,和位置并没有任何关系。
pointer.plotX,pointer.plotY是数据点的位置。本来一开始想获取tooltip的位置,搞了半天发现[b]tooltip相应信息保存到[/b]tooltipPoints数组中,tooltipPoints是一个对象,里面保存了每一个数据点的tooltip提示信息的属性。难点是还需要研究index值是怎么来的,获取数据点相应的tooltip在tooltipPoints索引。
(6)默认的div隐藏
?
相关文章推荐
- 互联网协议总结
- 数据库查数据库名,表名,列表
- 2015年十大测试工具你认识几个
- 大数据建设思路
- java21:捕鱼达人
- Tips
- xcode快捷方式--界面--看代码
- Android夜间模式最佳实践
- C# winform带进度条的图片下载
- pthread_join函数及linux线程
- Ubuntu 14.04 LTS 版升级到 GCC 4.9.2
- Microservice架构模式简介
- C Primer Plus3-5
- pip 部署
- Hadoop年度回顾与2016发展趋势
- LeetCode之双指针(1)
- Sublime Text 3 快捷键汇总
- sql server 与oracle 中字段类型的对应
- RTP payload type
- C#委托的详细使用