首先上效果图,两条折线图数据。
下面上代码。
1.先上自己封装的MyLineChart代码。同样对属性进行了封装。设置数据调用setLineChartData()方法
public class MyLineChart extends LineChart {
public ValueFormatter mXAxisFormatter;
protected Typeface tfLight;
private Context context;
public MyLineChart(Context context) {
super(context);
tfLight = Typeface.createFromAsset(context.getAssets(), "OpenSans-Light.ttf");
this.context=context;
initLineChart();
}
public MyLineChart(Context context, AttributeSet attrs) {
super(context, attrs);
tfLight = Typeface.createFromAsset(context.getAssets(), "OpenSans-Light.ttf");
this.context=context;
initLineChart();
}
public MyLineChart(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
tfLight = Typeface.createFromAsset(context.getAssets(), "OpenSans-Light.ttf");
this.context=context;
initLineChart();
}
/**
* 设置lineChart的一些属性配置
*/
public void initLineChart() {
// Typeface tfLight = Typeface.createFromAsset(context.getAssets(), "OpenSans-Light.ttf");
this.setDrawGridBackground(false);
this.getDescription().setEnabled(false);
this.setDrawBorders(false);
this.getAxisRight().setEnabled(false);//不要右边的y轴
XAxis xAxis = this.getXAxis();
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
xAxis.setTypeface(tfLight);
xAxis.setDrawGridLines(false);
xAxis.setGranularity(1f); // only intervals of 1 day
// mXAxisFormatter = new StringDataAxisValueFormatter();//TODO 这个控制横坐标的显示内容
// xAxis.setValueFormatter(mXAxisFormatter);
xAxis.setLabelRotationAngle(-60);//设置x坐标的文字倾斜。为倾斜60°
xAxis.setTextSize(9);//设置x轴文字大小
// xAxis.setAxisMinimum(0f);//这句话不能加。加了就会出现x轴下标为-1,第一个值不在原点了。
// enable touch gestures
YAxis leftAxis = this.getAxisLeft();
leftAxis.setTypeface(tfLight);
leftAxis.setDrawGridLines(true);
leftAxis.setLabelCount(8, true);//这里设置y轴坐标数的个数。包含0点,有几个刻度
// leftAxis.setValueFormatter(custom);
leftAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART);
leftAxis.setSpaceTop(15f);
leftAxis.setAxisMinimum(0f); //保证y轴从0开始 不然会上移一点 this replaces setStartAtZero(true)
this.setTouchEnabled(true);
// enable scaling and dragging
this.setDragEnabled(true);
//设置是否可以缩放。false不能放大缩小。但是如果显示不全可以左右滑动
this.setScaleEnabled(false);
// if disabled, scaling can be done on x- and y-axis separately
this.setPinchZoom(false);
// this.setExtraBottomOffset(10f);
/** 图例的属性 */
Legend l = this.getLegend();
l.setEnabled(false);//不显示图例 底部的什么颜色代表什么的说明
//决定底部图例的位置。
// l.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM);
// l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.CENTER);
// l.setOrientation(Legend.LegendOrientation.HORIZONTAL);
// l.setDrawInside(false);
// l.setForm(Legend.LegendForm.LINE);//下面的图例是正方形还是线型样式,等其其它
// l.setFormSize(30f);//代表图下面图例大小
// l.setTextSize(11f);
// l.setXEntrySpace(10f);
}
public void setLineChartData(List> values, String[] mSsLable) {
if (getData() != null &&
getData().getDataSetCount() > 0) {
for (int i = 0; i < mSsLable.length; i++) {
LineDataSet set1 = (LineDataSet) getData().getDataSetByIndex(i);
set1.setValues(values.get(i));
set1.notifyDataSetChanged();
}
getData().notifyDataChanged();
notifyDataSetChanged();
} else {
ArrayList dataSets = new ArrayList<>();
int[] colors = {ContextCompat.getColor(context, R.color.yiban_color)
, ContextCompat.getColor(context, R.color.xiaoguimo_color)
};
for (int z = 0; z < mSsLable.length; z++) {
LineDataSet d = new LineDataSet(values.get(z), mSsLable[z]);//每一条折线的属性设置
d.setLineWidth(2.5f);
// d.setCircleRadius(4f);
d.setDrawValues(false); // 设置是否显示数据点的值
int color = colors[z % colors.length];
d.setColor(color);//设置折现的颜色
d.setCircleColor(color);//设置折线图圆圈点的颜色
//添加下面这行代码 LineChart实现曲线样式
// d.setMode(LineDataSet.Mode.CUBIC_BEZIER);//曲线
d.setMode(LineDataSet.Mode.LINEAR);//折现
// d.setCircleColor(color);
dataSets.add(d);
}
LineData data = new LineData(dataSets);
this.setData(data);
}
this.invalidate();
//TODO 设置完数据后。必须设置完数据后才有效设置最大显示15个。多的话需要滑动查看,最少也要15.这样就固定。 就算只有1个。还是在固定的位置。
setVisibleXRangeMaximum(15);
setVisibleXRangeMinimum(13);
}
}
2.布局文件里面,引用自己封装的MylineChart
3.在activity里面拿到MyLineChart对象。然后设置数据调用MyLineChart对象的setLineChartData()。
(1)看一下我们的网络数据是一个list,里面的BarDateBean内容
public class BarDataBean implements Serializable {
private String ssdsmc;//城市,或者区县 x轴内容
private float ybr;// 订单个数 y轴内容
private float xgm;// 订单个数 y轴内容
private float hj;//合计
public BarDataBean(String ssdsmc, float ybr, float xgm, float hj) {
this.ssdsmc = ssdsmc;
this.ybr = ybr;
this.xgm = xgm;
this.hj = hj;
}
//set,get方法我这里就不粘贴了。
}
(2)得到网络数据后我们如何给柱状图设置数据代码如下。
private String[] mSsLable = new String[]{"手机", "电脑"};//图例
ArrayList
private void setChartData() {
getLineChartData();
setXAxis(lineChart.getXAxis());
lineChart.setLineChartData(lineDataList, mSsLable);
}
/**
* 把得到的网络是数据转为lineChart需要的数据类型。
*/
private void getLineChartData() {//这里我是知道了。只有2条线。两条数据。多的话,需要多条处理
lineDataList.clear();
for (int z = 0; z < mSsLable.length; z++) {
ArrayList values = new ArrayList<>();
for (int i = 0; i < valueList.size(); i++) {
if (z == 0) {
values.add(new Entry(i, (float) valueList.get(i).getYbr()));
} else {
values.add(new Entry(i, (float) valueList.get(i).getXgm()));
}
}
lineDataList.add(values);
}
}
private void setXAxis(XAxis xAxis) {
/** (1)第一种就是先给x轴设置ValueFOrmatter,然后这里直接刷新。(2)或者就是不设置。这里直接设置。
第一种更新一下,x轴的数据。这样到x轴得到了更新,点击某个弹出的悬浮框内容也得到了更新。或者悬浮框也在这里设置market*/
// ((StringDataAxisValueFormatter)mXAxisFormatter).refreshList(valueList);
StringDataAxisValueFormatter xFormatter = new StringDataAxisValueFormatter() { //设置每个x轴的内容
@Override
public String getFormattedValue(float value) {//这个value是那边BarEntry得到的x的值。
try {
String cityName= (valueList.get((int) value)).getSsdsmc();
if(cityName.length()>4){
String bb = cityName.substring(0, 3);
cityName=bb+"...";
}
return cityName;
} catch (Exception e) {
e.printStackTrace();
return "";
}
}
};
xAxis.setValueFormatter(xFormatter);
int lineLayoutId=R.layout.my_custom_line_marker_view;
MyCustomMarkerView lineMv = new MyCustomMarkerView(this, valueList,lineLayoutId);
// mv.setChartView(lineChart); // For bounds control
lineChart.setMarker(lineMv);//折线图设置market
xAxis.setLabelCount(valueList.size());//TODO 这里决定者x轴显示的个数 拿到数据库再设置显示个数,也不确定起作用了没,反正后面加上true。就都乱了
}
(3)MyCustomMarkerView的代码可以参照我的上一篇文章。有代码
https://blog.csdn.net/bangyiqing/article/details/107068655