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

来源：互联网发布：档案管理系统软件源码编辑：程序博客网时间：2024/04/30 02:51

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

本文是讲述如何使用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出来。