highChats 设置两两线共享数据显示在tooltip

本文详细介绍了如何通过分析highCharts源代码来设置两两线共享数据显示在tooltip上,特别提到了一些API文档中未包含的方法,如获取series和point的下标。作者分享了其学习过程,期望能为其他开发者节省时间,虽然语言表达略显简单,但力求易懂。
摘要由CSDN通过智能技术生成
先直接上代码
$('#container').highcharts({
    ...
    tooltip: {
<span style="white-space:pre">	</span>crosshairs: true, //显示焦点的十字线
<span style="white-space:pre">	</span>formatter: function() {
		//判断温湿度折线,偶为温度,奇为湿度,分别获取上一根折线和下一个折线数据
		var series1,series2,
		point1,point2;
		var point_index = this.point.index;//数据点的下标
                //我自己的相关联的线是奇偶(1,2)(3,4),其他需求请另写算法。大致不变
		if(this.series.index % 2 ==0){
		      series1 = this.series;
		      series2 = $('#container').highcharts().series[this.series.index + 1];//获取湿度数据
		      point1 = this.point;
		      point2 = series2.data[point_index];//获取第二条线的焦点
		}else{
		      series1 = $('#container').highcharts().series[this.series.index - 1];
		      series2 = this.series;
		      point1 = series1.data[point_index];
		      point2 = this.point;
		}
		            	
		//显示在tooltip的数据
		return '<b>'+ Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'</b><br>'+                
                        series1.name +': <b>'+ Highcharts.numberFormat(point1.y, 1) +'°C</b><br>' +
                        series2.name +': <b>'+ Highcharts.numberFormat(point2.y, 1) +'%</b>';                      
                }
                //添加第二个点的MouseOverCSS,就是焦点变大的那个显示
                 plotOptions: {
		 series: {
		  point: {
		        events: {
		        	mouseOver: function () {
			        	var point_index = this.index;//数据点的下标
					        if(this.series.index % 2 ==0){
					            	var series = $('#container').highcharts().series[this.series.index + 1];//获取湿度数据
							var point = series.data[point_index];
							//添加hover样式这个方式是自己写的。在下面
							point.onMouseOverCSS();
					         }else{
					            	var series = $('#container').highcharts().series[this.series.index - 1];//获取湿度数据
							var point = series.data[point_index];
						        //添加hover样式
							point.onMouseOverCSS();
					         }
				         },
				         mouseOut: function () {
			        		var point_index = this.index;//数据点的下标
					        if(this.series.index % 2 ==0){
					            var series = $('#container').highcharts().series[this.series.index + 1];//获取湿度数据
						    var point = series.data[point_index];
							//删除hover样式
						    point.onMouseOutCSS();
					        }else{
					            var series = $('#container').h
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在JFreeChart的Crosshair上添加ToolTip显示数据,可以使用CrosshairOverlay类。具体步骤如下: 1. 创建CrosshairOverlay对象并将其添加到ChartPanel中: ``` CrosshairOverlay crosshairOverlay = new CrosshairOverlay(); chartPanel.addOverlay(crosshairOverlay); ``` 2. 创建Crosshair对象并将其添加到CrosshairOverlay中: ``` Crosshair xCrosshair = new Crosshair(Double.NaN, Color.GRAY, new BasicStroke(0f)); xCrosshair.setLabelVisible(true); xCrosshair.setLabelGenerator(new StandardCrosshairLabelGenerator("{0}", NumberFormat.getInstance())); crosshairOverlay.addDomainCrosshair(xCrosshair); Crosshair yCrosshair = new Crosshair(Double.NaN, Color.GRAY, new BasicStroke(0f)); yCrosshair.setLabelVisible(true); yCrosshair.setLabelGenerator(new StandardCrosshairLabelGenerator("{0}", NumberFormat.getInstance())); crosshairOverlay.addRangeCrosshair(yCrosshair); ``` 3. 为Crosshair添加ToolTip: ``` chartPanel.addChartMouseListener(new ChartMouseListener() { @Override public void chartMouseMoved(ChartMouseEvent event) { ChartEntity entity = event.getEntity(); if (entity instanceof XYItemEntity) { XYItemEntity item = (XYItemEntity) entity; int seriesIndex = item.getSeriesIndex(); int itemIndex = item.getItem(); double x = dataset.getXValue(seriesIndex, itemIndex); double y = dataset.getYValue(seriesIndex, itemIndex); xCrosshair.setValue(x); yCrosshair.setValue(y); xCrosshair.setLabelGenerator(new StandardCrosshairLabelGenerator("{0}", NumberFormat.getInstance())); yCrosshair.setLabelGenerator(new StandardCrosshairLabelGenerator("{0}", NumberFormat.getInstance())); chartPanel.repaint(); } } @Override public void chartMouseClicked(ChartMouseEvent event) { } }); ``` 在chartMouseMoved方法中,获取当前鼠标所在的数据点的坐标,并将其设置为Crosshair的值。然后通过setLabelGenerator方法为Crosshair设置ToolTip的内容。最后调用repaint方法更新图表。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值