highcharts扩展tooltip提示异步信息
cookqq ›博客列表 ›highcharts

highcharts扩展tooltip提示异步信息

2013-09-06 16:47:42.0|分类: highcharts|浏览量: 1793

摘要: 本人博客开始迁移,博客整个架构自己搭建及编码 http://www.cookqq.com highcharts方面的知识很多: http://api.highchar

本人博客开始迁移,博客整个架构自己搭建及编码 http://www.cookqq.com


highcharts方面的知识很多:

http://api.highcharts.com/highcharts

http://www.highcharts.com/

http://www.52wulian.org/highcharts_api/

现在来看看我们项目中的需求吧,先明白需求才能改进啊。


当你移动到一个数据点的时候,tooltip自动提示相应的信息。但是项目中需要异步获取对此数据点的评论然后显示。

实现需求的步骤:

(0)API文档HighCharts结构如下

var chart = new Highcharts.Chart({

  chart: {…}        // 配置chart图表区

  colors: [{...}]    // 配置主体显示颜色(多个线条和柱体的颜色顺序的)

  credits: {…}      // 配置右下角版权链接

  exporting: {…}  	  // 配置导出及打印

  global: {…}       // HighCharts国际化方法调用

  labels: {…}       // HTML标签,可以放置在绘图的任何位置

  lang: {…}        	 // 语言对象属性配

  legend: {…}       // 配置图例选项

  loading: {…}    	  // 配置图表加载选项

  navigation: {…}   // 配置导出按钮属性

  pane: {…}        	 // 仅适用于极性图表和角仪表

  plotOptions: {…}  // 配置数据点选项

  series: [{...}]   // 配置数据列选项

  subtitle: {…}     // 配置副标题

  title: {…}        // 配置标题

  tooltip: {…}      // 配置数据点提示框

  xAxis: {…}        // 配置x轴选项

  yAxis: {…}        // 配置y轴选项

})

(1)研究tooltip相应的属性:

参数名 说明 默认值
enable 是否显示提示框 true
backgroundColor 设置提示框的背景色 “top”
borderColor 提示框边框颜色 “auto”
borderRadius 提示框圆角度/td> 5
style css样式

style: {
color: ‘#333333′,

fontSize: ’9pt’,
padding: ’5px’}

formatter

回调函数,用于格式化输出提示框的显示内容

返回的内容支持html标签如:<b>, <strong>,<br/>

 

主要的参数formatter:

formatter: function() {
                            return '<b>'+ this.series.name +'</b><br/>'+
                            Highcharts.dateFormat('%Y-%m-%d', this.x) +': '+ this.y ;
                    }

这就是tooltip提示信息的内容。那要是直接把异步获取的信息的代码直接加到其中不就行了?

获取数据时异步的,tooltip中的formatter直接就返回值了,并没有等待异步加载的数据。

(2)既然直接向tooltip增加内容不可以,可以自己写一个div,然后显示评论信息,div然后随着数据点位置的改变而改变而改变位置。

highcharts的events只有click,mouseOver,mouseOut事件。

步骤:

(3)首先自己写个div

<div id="reporting"></div>

(4)div的样式

<style>
#reporting {
    position: absolute; 
    top: 35px; 
    right: 20px; 
text-align:left;
border:1px solid #c7bf93;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
padding:6px 8px;
min-width:50px;
max-width:225px;
color:#000;
background-color:#fff9c9;
}
</style>


(5)重写 mouseOver(主要就是获取数据,并且显示),  mouseOut(隐藏div)事件

mouseOver: function() {
                                	                                	var itemPriceId2 = map1.get(this.series.name);
                                	var pointer = this;
                                	//var tooltip = pointer.series.tooltipPoints;
                                	
                                    $.post("<%=request.getContextPath()%>/calculator/listJsonCalComment.action", 
                                   		 {itemid :itemPriceId2,type:'2', dataDate : Highcharts.dateFormat('%Y-%m-%d', this.x) }, 
                                   		 function(data){
                                   		 	$("#reporting").html(data);
                                   		 	var left = pointer.plotX-110;
                                   		 	if(left <0){
                                   		 		left =0;
                                   		 	}
                                   			$("#reporting").css("left",left + "px"); 
                                   			$("#reporting").css("top",pointer.plotY+75 + "px");
                                   			$("#reporting").show();
                                    	},'html');
                                },
                                mouseOut: function() {
                                	                                	$("#reporting").hide();
                                	
                                }

注意:后获取数据点位置的时候,废了很大的劲,这方面的资料很少,只能自己研究highcharts的源码。

pointer.x是x轴的值,pointer.y是y轴的值,和位置并没有任何关系。

pointer.plotX,pointer.plotY是数据点的位置。本来一开始想获取tooltip的位置,搞了半天发现tooltip相应信息保存到tooltipPoints数组中,tooltipPoints是一个对象,里面保存了每一个数据点的tooltip提示信息的属性。难点是还需要研究index值是怎么来的,获取数据点相应的tooltip在tooltipPoints索引。

(6)默认的div隐藏

$(document).ready(function() {
    	//首先隐藏评论信息的显示区
    	$("#reporting").hide();
});

好了,现在看看样子吧:


 


 


 


 


能否提供下源码,不知道mouseover写在哪里。

引用来自“大空”的评论

能否提供下源码,不知道mouseover写在哪里。
建议你看一下,highcharts的api 求教楼主index值如何获取的呀 楼主。。你这里怎么获取之前tooltip中的值的啊

一键分享文章

分类列表

  • • struts源码分析
  • • flink
  • • struts
  • • redis
  • • kafka
  • • ubuntu
  • • zookeeper
  • • hadoop
  • • activiti
  • • linux
  • • 成长
  • • NIO
  • • 关键词提取
  • • mysql
  • • android studio
  • • zabbix
  • • 云计算
  • • mahout
  • • jmeter
  • • hive
  • • ActiveMQ
  • • lucene
  • • MongoDB
  • • netty
  • • flume
  • • 我遇到的问题
  • • GRUB
  • • nginx
  • • 大家好的文章
  • • android
  • • tomcat
  • • Python
  • • luke
  • • android源码编译
  • • 安全
  • • MPAndroidChart
  • • swing
  • • POI
  • • powerdesigner
  • • jquery
  • • html
  • • java
  • • eclipse
  • • shell
  • • jvm
  • • highcharts
  • • 设计模式
  • • 列式数据库
  • • spring cloud
  • • docker+node.js+zookeeper构建微服务
版权所有 cookqq 感谢访问 支持开源 京ICP备15030920号
CopyRight 2015-2018 cookqq.com All Right Reserved.