MPAndroidChart图形联动

MPAndroidChart图形联动

本篇基于博客MPAndroidChart的K线图上添加均线,两个MPAndroidChart是有联动效果的

原理

获取正在滑动的Chart的触摸事件,将事件同步给想要联动的Chart

实现

添加事件处理的类

package ……;

import android.graphics.Matrix;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;

import com.github.mikephil.charting.charts.BarLineChartBase;
import com.github.mikephil.charting.charts.Chart;
import com.github.mikephil.charting.highlight.Highlight;
import com.github.mikephil.charting.listener.ChartTouchListener;
import com.github.mikephil.charting.listener.OnChartGestureListener;

/**
 * Created by Android on 2015/12/10.
 */
public class CoupleChartGestureListener  implements OnChartGestureListener {

    private Chart srcChart;
    private Chart[] dstCharts;


    public CoupleChartGestureListener(Chart srcChart, Chart[] dstCharts) {
        this.srcChart = srcChart;
        this.dstCharts = dstCharts;
    }

    @Override
    public void onChartGestureStart(MotionEvent me, ChartTouchListener.ChartGesture lastPerformedGesture) {

    }

    @Override
    public void onChartGestureEnd(MotionEvent me, ChartTouchListener.ChartGesture lastPerformedGesture) {

    }

    @Override
    public void onChartLongPressed(MotionEvent me) {

    }

    @Override
    public void onChartDoubleTapped(MotionEvent me) {

    }

    @Override
    public void onChartSingleTapped(MotionEvent me) {
        for (Chart dstChart : dstCharts) {
            if (dstChart.getVisibility() == View.VISIBLE) {
                Highlight h = ((BarLineChartBase)dstChart).getHighlightByTouchPoint(me.getX(), me.getY());
                ((BarLineChartBase)dstChart).highlightTouch(h);
            }
        }
    }

    @Override
    public void onChartFling(MotionEvent me1, MotionEvent me2, float velocityX, float velocityY) {

    }

    @Override
    public void onChartScale(MotionEvent me, float scaleX, float scaleY) {
        syncCharts();

    }

    @Override
    public void onChartTranslate(MotionEvent me, float dX, float dY) {
        syncCharts();

    }

    public void syncCharts() {
        Matrix srcMatrix;
        float[] srcVals = new float[9];
        Matrix dstMatrix;
        float[] dstVals = new float[9];

        // get src chart translation matrix:
        srcMatrix = srcChart.getViewPortHandler().getMatrixTouch();
        srcMatrix.getValues(srcVals);

        // apply X axis scaling and position to dst charts:
        for (Chart dstChart : dstCharts) {
            if (dstChart.getVisibility() == View.VISIBLE) {
                dstMatrix = dstChart.getViewPortHandler().getMatrixTouch();
                dstMatrix.getValues(dstVals);
                dstVals[Matrix.MSCALE_X] = srcVals[Matrix.MSCALE_X];
                dstVals[Matrix.MTRANS_X] = srcVals[Matrix.MTRANS_X];
                dstMatrix.setValues(dstVals);
                dstChart.getViewPortHandler().refresh(dstMatrix, dstChart, true);
            }
        }
    }
}

事件传递

// 获取K线控件
KLineChart mKLine = (KLineChart) findViewById(R.id.kLineView);
// 获取交易量控件
TradingVolumeChart mTradingVolumeView = (TradingVolumeChart) findViewById(R.id.tradingVolumeView);
// 将K线控的滑动事件传递给交易量控件
mKLine.setOnChartGestureListener(new CoupleChartGestureListener(mKLine, new Chart[]{mTradingVolumeView}));
// 将交易量控件的滑动事件传递给K线控件
mTradingVolumeView.setOnChartGestureListener(new CoupleChartGestureListener(mTradingVolumeView, new Chart[]{mKLine}));
  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
leaflet 是一个基于 JavaScript 的交互式地图库,可以用于创建各种地图可视化应用。在 leaflet 中,可以通过绑定事件来实现图形联动。 例如,你可以在地图上添加一个多边形,并在其上注册 click 事件,当用户点击该多边形时,可以通过获取该多边形的属性信息,再根据这些信息更新其他图形的显示状态。 下面是一个简单的示例代码,演示了如何实现多边形和圆形的联动: ``` // 创建地图对象 var map = L.map('map').setView([51.505, -0.09], 13); // 创建多边形 var polygon = L.polygon([ [51.505, -0.09], [51.51, -0.1], [51.52, -0.06] ]).addTo(map); // 创建圆形 var circle = L.circle([51.508, -0.11], { radius: 500 }).addTo(map); // 注册 click 事件 polygon.on('click', function(e) { // 获取多边形的属性信息 var latlng = e.latlng; var bounds = e.target.getBounds(); // 更新圆形的显示状态 circle.setStyle({ fillColor: 'green', fillOpacity: 0.5 }); }); circle.on('click', function(e) { // 获取圆形的属性信息 var latlng = e.latlng; var radius = e.target.getRadius(); // 更新多边形的显示状态 polygon.setStyle({ fillColor: 'yellow', fillOpacity: 0.5 }); }); ``` 在上面的示例代码中,我们创建了一个地图对象,并在地图上添加了一个多边形和一个圆形。然后,我们分别为这两个图形注册了 click 事件,当用户点击某个图形时,会触发相应的事件处理函数。 在事件处理函数中,我们可以通过 event 对象获取当前图形的属性信息,然后根据这些信息更新其他图形的显示状态。例如,在多边形的 click 事件处理函数中,我们获取了多边形的边界信息,然后更新圆形的填充颜色和透明度,使其显示为绿色半透明。同样地,在圆形的 click 事件处理函数中,我们获取了圆形的半径信息,然后更新多边形的填充颜色和透明度,使其显示为黄色半透明。 这样,就实现了多边形和圆形的联动,用户可以通过点击任意一个图形来更新其他图形的显示状态。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值