效果图
1、hellocharts 的引用 在app的 build.gradle 中添加 compile 'com.github.lecho:hellocharts-library:[email protected]' 并再次编译即可
2、hellocharts的使用
布局文件
<lecho.lib.hellocharts.view.LineChartView
android:id="@+id/linechart"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="10dp"
android:paddingTop="10dp" />
主要代码：
private LineChartView chartTop;
String[] dateX = {"6-04","6-05","6-06","6-07","6-08","6-09","6-10"};//X轴的标注
int[] money= {1000,420,900,330,1000,740,2300};//图表的数据点
float[] dataY = {0,400,800,1200,1600,2000,2400};//Y轴的标注
private List<PointValue> mPointValues = new ArrayList<PointValue>();
private List<AxisValue> mAxisXValues = new ArrayList<AxisValue>();
@Override
protected void findViews() {
chartTop = findViewById(R.id.linechart);
}
@Override
protected void initViews(Bundle savedInstanceState) {
initAxisXLables();//获取x轴的标注
initAxisPoints();//获取坐标点
initLineChart();//初始化
}
/**
* 设置X 轴的显示
*/
private void initAxisXLables(){
for (int i = 0; i < dateX.length; i++) {
mAxisXValues.add(new AxisValue(i).setLabel(dateX[i]));
}
}
/**
* 图表的每个点的显示
*/
private void initAxisPoints() {
for (int i = 0; i < money.length; i++) {
mPointValues.add(new PointValue(i, money[i]));
}
}
private void initLineChart(){
Line line = new Line(mPointValues).setColor(Color.parseColor("#5E8BDF")); //折线的颜色
List<Line> lines = new ArrayList<Line>();
line.setShape(ValueShape.CIRCLE);//折线图上每个数据点的形状 这里是圆形 （有三种 ：ValueShape.SQUARE ValueShape.CIRCLE ValueShape.SQUARE）
line.setCubic(false);//曲线是否平
// line.setStrokeWidth(3);//线条的粗细，默认是3
line.setFilled(true);//是否填充曲线的面积
line.setHasLabels(true);//曲线的数据坐标是否加上备注
line.setFormatter(new SimpleLineChartValueFormatter(2));//设置显示小数点
// line.setHasLabelsOnlyForSelected(true);//点击数据坐标提示数据（设置了这个line.setHasLabels(true);就无效）
line.setHasLines(true);//是否用直线显示。如果为false 则没有曲线只有点显示
line.setHasPoints(true);//是否显示圆点 如果为false 则没有原点只有点显示
line.setStrokeWidth(1);
line.setPointRadius(3);
lines.add(line);
LineChartData data = new LineChartData();
data.setValueLabelBackgroundColor(Color.TRANSPARENT);
data.setValueLabelBackgroundAuto(true);
data.setValueLabelBackgroundEnabled(true);
data.setValueLabelTextSize(6);
data.setValueLabelsTextColor(Color.WHITE); //此处设置坐标点旁边的文字颜色
data.setLines(lines);
//坐标轴
Axis axisX = new Axis(); //X轴
axisX.setHasTiltedLabels(false); //X轴下面坐标轴字体是斜的显示还是直的，true是斜的显示
// axisX.setTextColor(Color.WHITE); //设置字体颜色
axisX.setTextColor(Color.GRAY);//灰色
axisX.setTextSize(7);//设置字体大小
axisX.setMaxLabelChars(0); //最多几个X轴坐标，意思就是你的缩放让X轴上数据的个数7<=x<=mAxisValues.length
axisX.setValues(mAxisXValues); //填充X轴的坐标名称
data.setAxisXBottom(axisX); //x 轴在底部
axisX.setHasLines(false); //x 轴分割线
// Y轴是根据数据的大小自动设置Y轴上限(在下面我会给出固定Y轴数据个数的解决方案)
Axis axisY = new Axis(); //Y轴
axisY.setName("");//y轴标注
axisY.setTextSize(8);//设置字体大小
axisY.setHasLines(true);
axisY.setMaxLabelChars(6);//max label length, for example 60
// 这样添加y轴坐标 就可以固定y轴的数据
List<AxisValue> values = new ArrayList<>();
for(int i = 0; i < dataY.length; i++){
AxisValue value = new AxisValue(dataY[i]);
values.add(value);
}
axisY.setValues(values);
data.setAxisYLeft(axisY); //Y轴设置在左边
//data.setAxisYRight(axisY); //y轴设置在右边
//设置行为属性，支持缩放、滑动以及平移
chartTop.setInteractive(false);
chartTop.setZoomType(ZoomType.HORIZONTAL);
chartTop.setMaxZoom((float) 1);//最大放大比例
chartTop.setContainerScrollEnabled(true, ContainerScrollType.HORIZONTAL);
chartTop.setLineChartData(data);
chartTop.setVisibility(View.VISIBLE);
/**注：下面的7，10只是代表一个数字去类比而已
* 当时是为了解决X轴固定数据个数。见（http://forum.xda-developers.com/tools/programming/library-hellocharts-charting-library-t2904456/page2）;
*/
Viewport v = new Viewport(chartTop.getMaximumViewport());
v.left = 0;
v.right= 7;
v.bottom = 0;
chartTop.setCurrentViewport(v);
}