先上图展示效果
本demo还采用了第三方开源控件,achartengine-1.1.0.jar 大家可以自行网上下载
因为原开源代码设计的曲线不支持横坐标为日期 纵坐标为double值,所以在本demo中对其部分方法进行了重写
private int[] store_colors = new int[] { Color.rgb(102, 205, 0),
Color.rgb(238, 0, 0), Color.rgb(28, 134, 238) }; // 曲线颜色 绿 红 蓝
private PointStyle[] store_style = new PointStyle[] { PointStyle.CIRCLE,
PointStyle.SQUARE, PointStyle.TRIANGLE }; // 曲线折点形状:圆、方形、三角形
private XYMultipleSeriesDataset mDataset = new XYMultipleSeriesDataset();
private XYMultipleSeriesRenderer mRenderer = new XYMultipleSeriesRenderer();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_achart);
LinearLayout chart = (LinearLayout) findViewById(R.id.chart);
String[] titles = new String[] { "数值", "上限值", "下限值" }; // 名称、上限、下限 三条曲线
List<Date[]> x = new ArrayList<Date[]>(); // 存放x轴的参数
Date[] index = new Date[30];
// x轴参数添加
for (int j = 0; j < 30; j++) {
index[j] = new Date(2015 - 1900, 5 - 1, 1 + j, 5, 11);
}
// 3条线一致
for (int i = 0; i < 3; i++) {
x.add(index); // 横坐标
}
//
List<double[]> values = new ArrayList<double[]>();
double[] yValues1 = new double[30];
double[] yValues2 = new double[30];
double[] yValues3 = new double[30];
for (int i = 0; i < 30; i++) {
yValues1[i] = i;
yValues2[i] = 40; // 上限
yValues3[i] = -1; // 下限
}
values.add(yValues1);
values.add(yValues2);
values.add(yValues3);
// 曲线颜色
int[] colors = new int[3];
// 将预设的颜色加入本次曲线图
for (int i = 0; i < 3; i++) {
colors[i] = store_colors[i];
}
// 折点形状
PointStyle[] styles = new PointStyle[3];
// 将预设的形状加入本次曲线图
for (int i = 0; i < 3; i++) {
styles[i] = store_style[i];
}
mRenderer = buildRenderer(colors, styles);
// ---------------------------------------------------------------------------------------------------------------
mRenderer.setXLabels(9); // x轴默认显示9格
mRenderer.setYLabels(5);
mRenderer.setShowGrid(true);
mRenderer.setXLabelsAlign(Align.RIGHT);
mRenderer.setYLabelsAlign(Align.RIGHT);
mRenderer.setXLabelsAngle(-25); // 倾斜角度
mRenderer.setGridColor(Color.BLACK); // 网格线颜色
mRenderer.setLabelsColor(Color.BLACK); // 标题颜色
mRenderer.setXLabelsColor(Color.BLACK); // 横坐标刻度文本颜色
mRenderer.setYLabelsColor(0, Color.BLACK);// 纵坐标刻度文本颜色
mRenderer.setAxesColor(Color.WHITE); // 坐标轴颜色
mRenderer.setLabelsTextSize(18);// 刻度字体大小
mRenderer.setMarginsColor(Color.WHITE);// 曲线图外背景颜色
mRenderer.setZoomButtonsVisible(true); // 缩放按钮
mRenderer.setPanEnabled(true, false); // X Y轴是否可移动
mRenderer.setYAxisMax(42); // 设置默认显示y轴最大值
mRenderer.setYAxisMin(-3);// 设置默认显示y轴最小值
mRenderer.setInScroll(true); // 可以在scrollView中显示
// mRenderer.setZoomInLimitY();
int n = 30;
// 设置xy轴的最大显示范围
mRenderer.setZoomLimits(new double[] {
x.get(0)[0].getTime()
- (x.get(0)[n - 1].getTime() - x.get(0)[0].getTime())
* 1.5,
x.get(0)[n - 1].getTime()
+ (x.get(0)[n - 1].getTime() - x.get(0)[0].getTime())
/ 2, -2, 42 });
mRenderer.setClickEnabled(true);
mDataset = buildDataset(titles, x, values);
int length = mRenderer.getSeriesRendererCount();
for (int i = 0; i < length; i++) {
if (i == 1 || i == 2) {
((XYSeriesRenderer) mRenderer.getSeriesRendererAt(i))
.setFillPoints(false); // 点实心
((XYSeriesRenderer) mRenderer.getSeriesRendererAt(i))
.setDisplayChartValues(false); // 警戒线不显示数值
((XYSeriesRenderer) mRenderer.getSeriesRendererAt(i))
.setPointStrokeWidth((float) 0.1);
((XYSeriesRenderer) mRenderer.getSeriesRendererAt(i))
.setLineWidth(5); // 线宽
} else {
((XYSeriesRenderer) mRenderer.getSeriesRendererAt(i))
.setFillPoints(true);
((XYSeriesRenderer) mRenderer.getSeriesRendererAt(i))
.setDisplayChartValues(true);
((XYSeriesRenderer) mRenderer.getSeriesRendererAt(i))
.setChartValuesTextSize(22);
}
}
setChartSettings(mRenderer, "标题", "", "", x.get(0)[0].getTime(),
x.get(0)[8].getTime(), -2, 41, Color.LTGRAY, Color.LTGRAY);
GraphicalView mChartView = ChartFactory.getTimeChartView(
getBaseContext(), mDataset, mRenderer, "MM-dd HH:mm"); //定义x轴显示格式
//将曲线加入布局
chart.addView(mChartView);
}
private XYMultipleSeriesRenderer buildRenderer(int[] colors,
PointStyle[] styles) {
XYMultipleSeriesRenderer renderer = new XYMultipleSeriesRenderer();
setRenderer(renderer, colors, styles);
return renderer;
}
private void setRenderer(XYMultipleSeriesRenderer renderer, int[] colors,
PointStyle[] styles) {
renderer.setAxisTitleTextSize(16);
renderer.setChartTitleTextSize(20);
renderer.setLabelsTextSize(15);
renderer.setLegendTextSize(15);
renderer.setPointSize(5f);
renderer.setMargins(new int[] { 20, 30, 15, 20 });
int length = colors.length;
for (int i = 0; i < length; i++) {
XYSeriesRenderer r = new XYSeriesRenderer();
r.setColor(colors[i]);
r.setPointStyle(styles[i]);
renderer.addSeriesRenderer(r);
}
}
private void setChartSettings(XYMultipleSeriesRenderer renderer,
String title, String xTitle, String yTitle, double xMin,
double xMax, double yMin, double yMax, int axesColor,
int labelsColor) {
renderer.setChartTitle(title);
renderer.setXTitle(xTitle);
renderer.setYTitle(yTitle);
renderer.setXAxisMin(xMin);
renderer.setXAxisMax(xMax);
renderer.setYAxisMin(yMin);
renderer.setYAxisMax(yMax);
renderer.setAxesColor(axesColor);
renderer.setLabelsColor(labelsColor);
}
private XYMultipleSeriesDataset buildDataset(String[] titles,
List<Date[]> xValues, List<double[]> yValues) {
XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset();
int length = titles.length;
for (int i = 0; i < length; i++) {
TimeSeries series = new TimeSeries(titles[i]);
Date[] xV = xValues.get(i);
double[] yV = yValues.get(i);
int seriesLength = xV.length;
for (int k = 0; k < seriesLength; k++) {
series.add(xV[k], yV[k]);
}
dataset.addSeries(series);
}
return dataset;
}
布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_marginTop="100dp"
android:layout_width="match_parent"
android:layout_height="300dp"
android:orientation="horizontal"
android:id="@+id/chart"
/>
</LinearLayout>