XYMultipleSeriesRenderer 绘制K线图，点击弹出pop

最新推荐文章于 2024-03-21 10:10:58 发布
最新推荐文章于 2024-03-21 10:10:58 发布
阅读量987 收藏
点赞数
分类专栏： android app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/silvia0427/article/details/8313280
版权
本文是讲述如何使用XYMultipleSeriesRenderer绘制K线图，并且点击弹出pop的实例，由于是从项目中摘出来的，所有只有主要代码并不是完成能够直接运行的程序。
在线api ： http://translate.googleusercontent.com/translate_c?hl=zh-CN&langpair=en%7Czh-CN&rurl=translate.google.com.hk&u=http://www.achartengine.org/content/javadoc/index.html%3Fhelp-doc.html&usg=ALkJrhjYJT1AV-YUZLi0BVh8V8BkvZ1K9g

首先：绘制K线图，并设置其相关属性

变量：
private LinearLayout containerbody;
    private GraphicalView mLineChartView;
    private PopupWindow mPopupWindow;
    private PopupWindow mPopupWindow1;
    private PopupWindow popWin;
    private View mPopupView;
    private View mPopupView1;
    private TextView mPopTxt1;
    private TextView mPopTxt2;
    private TextView mPopTxt3;
    private TextView mPopTxt4;

    private XYSeries series;
    private final int CHART_MARGINS_LEFT = 20;
    private final int CHART_MARGINS_TOP = 30;
    private final int CHART_MARGINS_RIGHT = 20;
//    private final int CHART_MARGINS_BOTTOM = 0;
    private int chart_margins_bottom;
    private final int CHART_X_LABELS = 9;
    private final int CHART_Y_LABELS = 6;
    private final int CHART_X_AXISMAX = CHART_X_LABELS + 1;
    private final int CHART_Y_AXISMAX = CHART_Y_LABELS * 10;
    private int panXLimit;
    private int lineEndX;
    private int mEventStartX;
//    private int mEventStartY;
    private int mEventEndX;
    private int mEventEndY;
    private int mScreenOffsetX = 0;
//    private int mScreenOffsetY = 0;
    private int POPWIN_WIDTH ;
    private int POPWIN_HEIGHT;
    private int POPWIN_WIDTH1 ;
    private int POPWIN_HEIGHT1;

initChartView: 
private void initChartView()
 {
  System.out.println("initChartView here !");
  // 1, 构造显示用渲染图
  XYMultipleSeriesRenderer renderer = new XYMultipleSeriesRenderer();
//  renderer.setPointSize(5);
  // 2,进行显示
  XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset();
  // 2.1, 构建数据
  series = new XYSeries("业绩曲线");
  // 填充数据
  System.out.println("initChartView here !lineEndX = " + lineEndX);
  for (int x = 0; x < lineEndX; x++)
  {
   // 填x,y值
   mDataMap = mDataMapList.get(x);
   // X轴从1开始，所以x+1
   series.add(x + 1, Integer.parseInt(mDataMap.get("BUSTOTAL")));
//   series.add(x + 1, (int) Math.abs(Math.random() * CHART_Y_AXISMAX));
   System.out.println("x = " + (x + 1) + " | y = " + Integer.parseInt(mDataMap.get("BUSTOTAL")));
  }
  // 需要绘制的点放进dataset中
  dataset.addSeries(series);

  // 3, 对点的绘制进行设置
  XYSeriesRenderer xyRenderer = new XYSeriesRenderer();
  // 3.1设置K 线颜色
  xyRenderer.setColor(Color.RED);
  // 3.2设置点的样式
  xyRenderer.setPointStyle(PointStyle.CIRCLE);
  xyRenderer.setFillPoints(true);
  //设置线的宽度
  xyRenderer.setLineWidth(3);
  // 3.3, 将要绘制的点添加到坐标绘制中
  renderer.addSeriesRenderer(xyRenderer);

  // 4, 设置图表属性
  // 显示网格
  renderer.setShowGrid(true);
  // 设置4周边距
  chart_margins_bottom = (int) getResources().getDimension(R.dimen.chart_margin_bottom);
  renderer.setMargins(new int[] { CHART_MARGINS_TOP, CHART_MARGINS_LEFT, chart_margins_bottom, CHART_MARGINS_RIGHT });
  // 边框外侧颜色
//  renderer.setMarginsColor(Color.argb(0, 0xff, 0, 0)); // 穿透背景色
  renderer.setMarginsColor(Color.WHITE);
  // 设置背景颜色
  renderer.setBackgroundColor(Color.TRANSPARENT);
  // 设置背景颜色生效
  renderer.setApplyBackgroundColor(true);
  // 是否支持图表移动
  renderer.setPanEnabled(true, false);
  // 坐标滑动上、下限
  renderer.setPanLimits(new double[]{1, panXLimit, 0, 100});
  // 是否支持图表缩放
  renderer.setZoomEnabled(false, false);
  // X轴等分，最小、最大坐标值
  renderer.setXLabels(CHART_X_LABELS);
  renderer.setXAxisMin(1);
  renderer.setXAxisMax(CHART_X_AXISMAX);
  // Y轴等分，最小、最大坐标值
  renderer.setYLabels(CHART_Y_LABELS);
  renderer.setYAxisMin(0);
  renderer.setYAxisMax(CHART_Y_AXISMAX);
  
  // 坐标轴颜色
  renderer.setAxesColor(Color.rgb(242, 103, 16));
  // 坐标轴单位文字颜色、字号
  renderer.setLabelsColor(Color.rgb(25, 110, 172));
  renderer.setLabelsTextSize(16);
  // 坐标轴文字对齐
  renderer.setYLabelsAlign(Paint.Align.RIGHT);
  //设置原点大小
  renderer.setPointSize(5);
  // 设置图表标题文字
//  renderer.setChartTitle(getString(R.string.chart_title));
  // 是否显示图例
  renderer.setShowLegend(false);

  // 生成图表视图
  mLineChartView = ChartFactory.getLineChartView(ShowChartActivity.this, dataset, renderer);
  mLineChartView.setOnTouchListener(chartViewOnTouchListener);
  mLineChartView.setId(0);

  // 添加至父容器
  containerbody = (LinearLayout) findViewById(R.id.container_chart);
  containerbody.addView(mLineChartView, new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
//  firstShowChart();
 }
2、监听其onTouch事件：其中，弹出pop窗口是根据项目需要弹出蓝色向左、蓝色向右、绿色向左、绿色向右四种pop. 
private OnTouchListener chartViewOnTouchListener = new OnTouchListener()
 {
  @Override
  public boolean onTouch(View v, MotionEvent event)
  {
   // TODO Auto-generated method stub
   dismissPopupWindow();
   
   switch (event.getAction())
   {
   case MotionEvent.ACTION_DOWN:
    mEventStartX = (int) event.getX();
//    mEventStartY = (int) event.getY();
    break;
   case MotionEvent.ACTION_UP:
    // *图表点击坐标
    mEventEndX = (int) event.getX();
    mEventEndY = (int) event.getY();
    System.out.println("1.------------------------------");
    // 屏幕是否位移
    mScreenOffsetX += mEventEndX - mEventStartX == 0 ? 0 : mEventEndX - mEventStartX;
    // 是否超出X轴原点（是，归0）
    mScreenOffsetX = mScreenOffsetX > 0 ? 0 : mScreenOffsetX;
    System.out.println("############ mOffsetX = " + mScreenOffsetX);

    if (event.getX() < CHART_MARGINS_LEFT || event.getX() > containerbody.getRight() - CHART_MARGINS_LEFT || event.getY() < CHART_MARGINS_TOP
            || event.getY() > containerbody.getBottom() - CHART_MARGINS_TOP)
    {
     // out of the chartView, do nothing.
    }
    else
    {
     // 取屏幕宽、高
     int screenWidth = getWindowManager().getDefaultDisplay().getWidth();
     int screenHeight = getWindowManager().getDefaultDisplay().getHeight();
     // 取图表区域宽、高
     int chartViewWidth = mLineChartView.getWidth();
     int chartViewHeight = mLineChartView.getHeight();
     // 求图表单元格宽、高
     int chartCellWidth = (chartViewWidth - CHART_MARGINS_LEFT * 2) / CHART_X_LABELS;
     int chartCellHeight = (chartViewHeight - CHART_MARGINS_TOP - chart_margins_bottom) / CHART_Y_LABELS;
     // 是否超出X轴上限（是，取上限值）
     mScreenOffsetX = mScreenOffsetX < -chartCellWidth * (panXLimit - CHART_X_AXISMAX) ? -chartCellWidth * (panXLimit - CHART_X_AXISMAX)
             : mScreenOffsetX;
     System.out.println("-chartCellWidth * panXLimit = " + -chartCellWidth * (panXLimit - CHART_X_AXISMAX));
     System.out.println("@@@@mScreenOffsetX = " + mScreenOffsetX);
     // *求图表像素坐标 换算成图表单位坐标
     int chartEventX = 1 + Math.round((mEventEndX - CHART_MARGINS_LEFT) / chartCellWidth);
     int chartEventY = CHART_Y_AXISMAX - Math.round((mEventEndY - CHART_MARGINS_TOP) / chartCellHeight * 10);
     System.out.println("chartEventX = " + chartEventX);
     System.out.println("chartEventY = " + chartEventY);
     // 求位移单元格
     int chartOffsetX = Math.round(mScreenOffsetX / chartCellWidth);
     System.out.println("############ chartOffsetX = " + chartOffsetX);
     System.out.println("2.================================");
     // 求图表像素坐标 换算成屏幕像素坐标     
     int screenEventX = mEventEndX + (screenWidth - chartViewWidth) / 2;
     int screenEventY = mEventEndY + (screenHeight - chartViewHeight) / 2;
//     System.out.println("chartEventX = " + event.getX());
//     System.out.println("chartEventY = " + event.getY());
//     System.out.println("screenEventX = " + screenEventX);
//     System.out.println("screenEventY = " + screenEventY);

     boolean mType = true;
     isShowPopWin: for (int i = 0; i < lineEndX; i++)
     {
      int pxSeriesX = ((int) (series.getX(i)) - 1) * chartCellWidth + CHART_MARGINS_LEFT;
      int pxSeriesY = (CHART_Y_AXISMAX - (int) (series.getY(i))) * chartCellHeight / 10 + CHART_MARGINS_TOP;
      System.out.println("3.**********************************");
//      System.out.println(" mEventEndX = " + mEventEndX);
//      System.out.println(" pxSeriesX + mScreenOffsetX - chartCellWidth / 2 = " + (pxSeriesX + mScreenOffsetX - chartCellWidth / 2));
//      System.out.println(" pxSeriesX + mScreenOffsetX + chartCellWidth / 2 = " + (pxSeriesX + mScreenOffsetX + chartCellWidth / 2));
//      System.out.println(" mEventEndY = " + mEventEndY);
//      System.out.println(" pxSeriesY - chartCellHeight / 2 = " + (pxSeriesY - chartCellHeight / 2));
//      System.out.println(" pxSeriesY + chartCellHeight / 2 = " + (pxSeriesY + chartCellHeight / 2));
      
      if (mEventEndX > pxSeriesX + mScreenOffsetX - chartCellWidth / 2 && mEventEndX < pxSeriesX + mScreenOffsetX + chartCellWidth / 2
              && mEventEndY > pxSeriesY - chartCellHeight / 2 && mEventEndY < pxSeriesY + chartCellHeight / 2)
      {
       System.out.println(" series.getX(i) = " + series.getX(i));
       System.out.println(" pxSeriesX = " + pxSeriesX);

       
       mDataMap = mDataMapList.get(i);
       String bustotal = mDataMap.get("BUSTOTAL").toString();
       String busunsuccess = mDataMap.get("BUSUNSUCCESS").toString();
       touchPoint = i;
       // 根据type，判断窗口绿or蓝
       if("0".equals(mDataMap.get("type").toString()))
       {
        mType = false;
        mPopTxt1.setText("预约" + bustotal + "条");
        mPopTxt2.setText(busunsuccess + "条");
       }
       else
       {
        mType = true;
        mPopTxt4.setText("已办理" + bustotal + "条");
       }
       if (screenWidth - screenEventX < POPWIN_WIDTH)
       {
        mPopupView.setBackgroundDrawable(getResources().getDrawable(R.drawable.blue_pop_right));
        mPopupView.setPadding(0, dip2px(ShowChartActivity.this, 30), dip2px(ShowChartActivity.this, 23), 0);
        mPopTxt1.setGravity(Gravity.RIGHT);
        mPopTxt2.setGravity(Gravity.RIGHT);
        mPopTxt3.setGravity(Gravity.RIGHT);

        mPopupView1.setBackgroundDrawable(getResources().getDrawable(R.drawable.green_pop_right));
        mPopupView1.setPadding(0, dip2px(ShowChartActivity.this, 30), dip2px(ShowChartActivity.this, 23), 0);
        mPopTxt4.setGravity(Gravity.RIGHT);

        screenEventX -= POPWIN_WIDTH;
       }
       else
       {
        mPopupView.setBackgroundDrawable(getResources().getDrawable(R.drawable.blue_pop_left));
        mPopupView.setPadding(dip2px(ShowChartActivity.this, 23), dip2px(ShowChartActivity.this, 30), 0, 0);
        mPopTxt1.setGravity(Gravity.LEFT);
        mPopTxt2.setGravity(Gravity.LEFT);
        mPopTxt3.setGravity(Gravity.LEFT);

        mPopupView1.setBackgroundDrawable(getResources().getDrawable(R.drawable.green_pop_left));
        mPopupView1.setPadding(dip2px(ShowChartActivity.this, 20), dip2px(ShowChartActivity.this, 30), 0, 0);
        mPopTxt4.setGravity(Gravity.LEFT);
       }

       mPopupWindow = new PopupWindow(mPopupView, POPWIN_WIDTH, POPWIN_HEIGHT);
       mPopupWindow1 = new PopupWindow(mPopupView1, POPWIN_WIDTH1, POPWIN_HEIGHT1);
       if(mType)
       {
        if (mPopupWindow1.isShowing())
        {
         mPopupWindow1.update(screenEventX, screenEventY + POPWIN_HEIGHT / 3, POPWIN_WIDTH, POPWIN_HEIGHT);
        }
        else
        {
         mPopupWindow1.showAtLocation(mLineChartView, Gravity.NO_GRAVITY, screenEventX, screenEventY + POPWIN_HEIGHT / 3);
        }
       }
       else
       {
        if (mPopupWindow.isShowing())
        {
         mPopupWindow.update(screenEventX, screenEventY + POPWIN_HEIGHT / 3, POPWIN_WIDTH, POPWIN_HEIGHT);
        }
        else
        {
         mPopupWindow.showAtLocation(mLineChartView, Gravity.NO_GRAVITY, screenEventX, screenEventY + POPWIN_HEIGHT / 3);
        }
       }

       break isShowPopWin;
      }
     }
    }
    break;
   default:
    break;
   }

   return false;
  }
 };

截图：




比较乱，等有时间整理出来一份完整的demo出来。
silvia0427
关注
专栏目录
android绘制折线图开源,安卓 使用开源AChartEngine图表库画折线图
weixin_42253260的博客
06-02 733
安卓 使用开源AChartEngine图表库画折线图一、简述记--使用AChartEngine开源图表库绘制简单的折线图。AChartEngine是一个开源的Android图表库，可以用来画折线图、面积图、条形图、柱形图、组合图表等等。简单的折线图例子：链接: https://pan.baidu.com/s/1ed3wiBEde4FgSNADTjfdQg 提取码: w3a2开源库acharten...
AchartEngine一条曲线存在时再绘制第二条
alpaca_的博客
06-26 271
要实现的功能是，已经存在一条曲线，按键给数据显示第二条，两条曲线同时存在，恢复重新显示第一条 Dataset and renderer should be not null and should have the same number XYMultipleSeriesRenderer renderer; XYMultipleSeriesDataset dataset; private XYMultipleSeriesRenderer InitRenderer(){ renderer =
XYMultipleSeriesRenderer绘制折线图
09-25
XYMultipleSeriesRenderer绘制折线图形
XYMultipleSeriesRenderer 绘制K线图，点击弹出pop (demo)
silvia0427的专栏
12-18 1966
之前写过一个这个问题的主要代码，现在放上完整的一个demo.备注：我不知道怎么上传附件啊。。所以只能再次开个新文将代码粘过来。。图片资源就没法了。。。项目中需要添加  achartengine-0.6.0.jarActivity:package com.test;import java.text.SimpleDateFormat;import java.util.ArrayList;import
android AChartEngine XYMultipleSeriesRenderer样式属性说明
平常心
05-10 4622
前两天再做一个关于AChartEngine曲线的实时显示，学习了一些AChartEngine基本用法，现在将XYMultipleSeriesRenderer样式属性说明记录下来和大家一起分享一下XYMultipleSeriesRenderer renderer = new XYMultipleSeriesRenderer(); renderer.setChartTitle(depid+"号房间
AChartEngine中属性XYMultipleSeriesRenderer和XYSeriesRender属性详解
weixin_33853794的博客
11-23 468
/** * 1.折线图的绘制， * 生成图表有两种方法，第一种方法：开启一个Activity。 * 第二种方法：返回View。 */ /** * 第一种方法思路分析 * 1.1使用startActivity方法, * 特别注意：由于这里我们要调用内部的Activity所以必须在注册文件中注册该Activity:<activity android:...
安卓手机电池电量电压动态曲线的绘制
10-10
最后，使用`renderer`和`dataset`更新`ChartView`，绘制出动态变化的电池电量电压曲线。 5. **优化性能**：为了保证用户体验，需要注意性能优化。例如，避免频繁的UI更新，可以适当增加定时器的时间间隔，或者采用...
android绘制动态曲线
05-11
`XYMultipleSeriesRenderer`是Android图表库`AndroidPlot`的一部分，它允许我们在一个图表上绘制多个系列的数据，并提供了丰富的自定义选项，如颜色、线型、标签等。 1. **AndroidPlot库介绍** AndroidPlot是一个...
安卓图表：achartengine之动态柱状图（一）
A125679880的博客
01-14 824
动态柱状图
AChartEngine高级应用之CombinedXYChart（组合统计图）在单个统计图上显示多样化的数据...
Stop Tears
01-19 160
AChartEngine高级应用之CombinedXYChart（组合统计图）在单个统计图上显示多样化的数据 现在是信息飞速发展时代，单个的统计图已经无法满足实际生产的要求，人们只想通过快速的观察就能知道很多信息，所以组合统计图就运用而生了，诸如，人们想了解一个地方的大致情况，首先可能要了解当地的天气情况，交通运输情况等，以下我模拟的是一个地方的天气、光照时间分布情况的统计图。这个是AChar...
SpringBoot + Poi-tl操作word，快速生成报表
m0_71777195的博客
06-06 3246
poi-tl是一个免费开源的Java类库，是基于Apache POI的模板引擎，纯Java组件，跨平台，代码短小精悍，通过插件机制使其具有高度扩展性。因此在使用的时候需要实现设置好模板，就像Freemarker一样，但是比其简单，也易操作。
使用poi-tl模板导出图表
u013008898的博客
06-19 1935
pom: 输入模板: word图表配置:1.插入->图表2.选中图表最外层->测试->替换文字,里面内容为{{xxx}}即相对应的map key
Java使用poi-tl1.9.1生成Word文档的几个小技巧
夜郎King的博客
07-18 2万+
本文将简单介绍poi-tl的相关知识，通过一个实际的案例实践，充分介绍如何利用poi-tl进行目标文档的生成，同时分享几个不同的office版本如何进行图表生成的解决方案
poi-tl自定义插件绘制图表的实现
qq_42809802的博客
02-28 909
poi-tl自定义实现插件插入图表
Java使用模板导出word、pdf
txyllyyj的博客
10-08 3884
使用deepoove根据模板导出word文档，包括文本、表格、图表、图片，使用WordConvertPdf可将word文档转换为pdf导出 需要注意的时，文档中需要循环的数必须绑定biulder 五、模板说明 1.这里面由{{}}包裹的内容对应ExportVO 实体中的属性名称
SpringBoot + POI-TL 操作 Word，快速生成报表，短小精悍！
最新发布
犬小哈
03-21 746
来源｜juejin.cn/post/7241171237603147831???? 欢迎加入小哈的星球，你将获得:专属的项目实战 / Java 学习路线 /一对一提问 / 学习打卡 / 赠书福利全栈前后端分离博客项目 2.0 版本完结啦，演示链接：http://116.62.199.48/，新项目正在酝酿中。全程手摸手，后端 + 前端全栈开发，从 0 到 1 讲解每个功能点开发步骤，1v1 ...
灵活使用XMultipleSeriesRenderer设置自定义的轴标签
热门推荐
kmyhy的专栏
04-21 2万+
ACE绘制的图形，坐标轴上的刻度值，要么显示为数字，要么显示为时间： 那么能不能在坐标轴上显示自己的内容，比如文字呢？这需要使用 XYMultipleSeriesRenderer的addTextLabel(int,String)方法。该方法接收一个int参数，用于指定要显示文字的X轴坐标，比如在X轴坐标1的位置显示“昆明”，则addTextLabel(1,”昆明”);当然，原来tick数字1仍然会
Android蓝牙接收心电数据绘制动态心电图实战
"这篇文章主要介绍了如何在Android平台上利用AChartEngine库来实现动态心电图的绘制。在医疗APP开发中，这样的功能是至关重要的，它能够实时展示心电仪通过蓝牙传输的数据。作者提供了相关的代码示例和参考资料，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值