先上圖展示效果
本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>
![與專家面對面：Android開發入門問與答[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)