XYMultipleSeriesRenderer 绘制K线图，点击弹出pop
本文是讲述如何使用XYMultipleSeriesRenderer绘制K线图，并且点击弹出pop的实例，由于是从项目中摘出来的，所有只有主要代码并不是完成能够直接运行的程序。
依赖包下载：achartengine-1.0.0.jar 下载链接
首先：绘制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;
}
};
效果图：
