图表绘制往上有很多文章，基本上涵盖了各种样式，但是！你架不住产品的设计啊，比如，正常的多条柱形图，X轴的显示位置都是在柱形图分割的位置：
但是呢，如果让你将分割显示在对应的柱形图下面呢？
就需要调整X轴，调整后柱形图还会有着可能显示不全的问题，或者是少的问题，如果在加上曲线图呢？曲线图依然是以原有的分割点进行绘制，而不是跟改后的X轴对应的位置，那么就需要调整，很耗费时间：
下面是依赖
compile 'com.github.PhilJay:MPAndroidChart:v3.0.2' compile 'com.squareup.retrofit2:converter-gson:2.4.0'
布局：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="qiehuan"
/>
<com.github.mikephil.charting.charts.CombinedChart
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/manager_chart"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.sis.pcust.activity.ManagerChartActivity"/>
</LinearLayout>
然后是实体类，当然，你也可以自己抽出来做成工具类，现在只是为了演示：
public class ManagerChartActivity extends AppCompatActivity {
private CombinedChart dataChart;//图表
private CombinedData data;
private String json="{\"maxWeatherList\":[\"0\",\"0\",\"0\",\"0\"],\"coolingReturnWaterTemperatureList\":[\"26.45\",\"26.71\",\"26.78\",\"0\"],\"outRoomTemperatureList\":[\"16.65\",\"17.51\",\"18.48\",\"0\"],\"avgOriginalWeatherList\":[\"0\",\"0\",\"0\",\"0\"],\"count_type\":1,\"energyList\":[90809.1,67673.2,81613.5,5692.4],\"datelist\":[\"2019-01\",\"2019-02\",\"2019-03\",\"2019-04\"],\"inRoomTemperatureList\":[\"24.34\",\"24.31\",\"24.56\",\"0\"],\"chilledReturnWaterTemperatureList\":[\"18.04\",\"18.96\",\"19.45\",\"0\"],\"minWeatherList\":[\"0\",\"0\",\"0\",\"0\"],\"success\":true,\"coolingSupplyWaterTemperatureList\":[\"27.38\",\"27.71\",\"27.91\",\"0\"],\"energyOriginalList\":[63450.0,54591.0,113626.0,156062.0],\"minOriginalWeatherList\":[\"0\",\"0\",\"0\",\"0\"],\"avgWeatherList\":[\"0\",\"0\",\"0\",\"0\"],\"chilledSupplyWaterTemperatureList\":[\"16.61\",\"17.72\",\"18.15\",\"0\"],\"maxOriginalWeatherList\":[\"0\",\"0\",\"0\",\"0\"]}";
private String json2="{\"maxWeatherList\":[\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\"],\"coolingReturnWaterTemperatureList\":[\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"34.32\",\"33.61\",\"32.57\",\"30.01\",\"27.25\",\"27.18\",\"26.45\",\"26.71\",\"26.78\",\"0\"],\"outRoomTemperatureList\":[\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"30.00\",\"28.30\",\"27.48\",\"23.56\",\"21.24\",\"18.06\",\"16.65\",\"17.51\",\"18.48\",\"0\"],\"avgOriginalWeatherList\":[\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\"],\"count_type\":1,\"energyList\":[0.0,0.0,0.0,0.0,0.0,0.0,125664.0,270167.0,251935.6,184276.0,154598.0,126387.2,90809.1,67673.2,81613.5,0.0],\"datelist\":[\"2018-01\",\"2018-02\",\"2018-03\",\"2018-04\",\"2018-05\",\"2018-06\",\"2018-07\",\"2018-08\",\"2018-09\",\"2018-10\",\"2018-11\",\"2018-12\",\"2019-01\",\"2019-02\",\"2019-03\",\"2019-04\"],\"inRoomTemperatureList\":[\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"10.99\",\"10.67\",\"10.48\",\"16.41\",\"25.48\",\"24.74\",\"24.34\",\"24.31\",\"24.56\",\"0\"],\"chilledReturnWaterTemperatureList\":[\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"15.99\",\"15.46\",\"14.06\",\"15.69\",\"15.89\",\"16.82\",\"18.04\",\"18.96\",\"19.45\",\"0\"],\"minWeatherList\":[\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\"],\"success\":true,\"coolingSupplyWaterTemperatureList\":[\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"37.52\",\"37.95\",\"35.79\",\"32.22\",\"29.12\",\"28.50\",\"27.38\",\"27.71\",\"27.91\",\"0\"],\"energyOriginalList\":[63450.0,54591.0,113626.0,156062.0,224873.0,246687.0,268106.0,276883.0,262809.0,204004.0,158050.0,127365.0,63450.0,54591.0,113626.0,156062.0],\"minOriginalWeatherList\":[\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\"],\"avgWeatherList\":[\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\"],\"chilledSupplyWaterTemperatureList\":[\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"25.91\",\"18.67\",\"15.34\",\"14.04\",\"13.92\",\"15.14\",\"16.61\",\"17.72\",\"18.15\",\"0\"],\"maxOriginalWeatherList\":[\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\",\"0\"]}";
private MainBean mainBean;
private List<String> datelist;
private List<Float> energyList;
private List<Float> energyOriginalList;
private List<Float> maxWeatherList;
private List<Float> minWeatherList;
private List<Float> coolingReturn;
private List<Float> coolingSupply;
private List<Float> chilledReturn;
private List<Float> chilledSupply;
private List<Float> inRoom;
private List<Float> avgOriginal;
private List<Float> avgWeatherList;
private List<List<Float>> yLineDatas;
private List<String> lineNames;
private List<Integer> colors;
private List<List<Float>> enerList;
private List<Integer> zcolors;
private List<String> znames;
private YAxis leftAxis;
private YAxis rightAxis;
private int ass=0;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_manager_chart);
dataChart = (CombinedChart) findViewById(R.id.manager_chart);
Button button1= (Button) findViewById(R.id.button1);
button1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
ass++;
if (ass%2==0){
Gson gson=new Gson();
mainBean = gson.fromJson(json, MainBean.class);
aaa();
showDataOnChart();
Legend legend = dataChart.getLegend();
legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.CENTER);
legend.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM);
}else {
Gson gson=new Gson();
mainBean = gson.fromJson(json2, MainBean.class);
aaa();
showDataOnChart();
Legend legend = dataChart.getLegend();
legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.CENTER);
legend.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM);
}
}
});
}
private void aaa() {
//X时间轴
datelist = mainBean.getDatelist();
//实际能耗，月搜索的柱形图
energyList = mainBean.getEnergyList();
//原始能耗
energyOriginalList = mainBean.getEnergyOriginalList();
//最高气温
maxWeatherList = mainBean.getMaxWeatherList();
//最低气温
minWeatherList = mainBean.getMinWeatherList();
//冷却水进水温度
coolingReturn = mainBean.getCoolingReturnWaterTemperatureList();
//冷却水出水温度
coolingSupply = mainBean.getCoolingSupplyWaterTemperatureList();
//冷冻水进水温度
chilledReturn = mainBean.getChilledReturnWaterTemperatureList();
//冷冻水出水温度
chilledSupply = mainBean.getChilledSupplyWaterTemperatureList();
// List<Float> outRoom = goodQueryModel.getOutRoomTemperatureList();//室外温度
//室内温度
inRoom = mainBean.getInRoomTemperatureList();
//原始平均温度
avgOriginal = mainBean.getAvgOriginalWeatherList();
//平均温度
avgWeatherList = mainBean.getAvgWeatherList();
yLineDatas = new ArrayList<>();
yLineDatas.add(maxWeatherList);
yLineDatas.add(minWeatherList);
yLineDatas.add(coolingReturn);
yLineDatas.add(coolingSupply);
yLineDatas.add(chilledReturn);
yLineDatas.add(chilledSupply);
// yLineDatas.add(outRoom);
yLineDatas.add(inRoom);
yLineDatas.add(avgOriginal);
yLineDatas.add(avgWeatherList);
lineNames = new ArrayList<>();
lineNames.add("室外最高温度");
lineNames.add("室外最低温度");
lineNames.add("冷却水进水温度");
lineNames.add("冷却水出水温度");
lineNames.add("冷冻水进水温度");
lineNames.add("冷冻水出水温度");
// lineNames.add("室外温度");
lineNames.add("室内温度");
lineNames.add("室外原始平均温度");
lineNames.add("室外平均温度");
colors = new ArrayList<>();
colors.add(this.getResources().getColor(R.color.maximum_temperature));
colors.add(this.getResources().getColor(R.color.minimum_temperature));
colors.add(this.getResources().getColor(R.color.coolingReturn));
colors.add(this.getResources().getColor(R.color.coolingSupply));
colors.add(this.getResources().getColor(R.color.chilledReturn));
colors.add(this.getResources().getColor(R.color.chilledSupply));
// colors.add(activity.getResources().getColor(R.color.outRoom));
colors.add(this.getResources().getColor(R.color.inRoom));
colors.add(this.getResources().getColor(R.color.avgOriginal));
colors.add(this.getResources().getColor(R.color.avgWeatherList));
enerList = new ArrayList<>();
enerList.add(energyList);
enerList.add(energyOriginalList);
zcolors = new ArrayList<>();
zcolors.add(this.getResources().getColor(R.color.blue));
zcolors.add(this.getResources().getColor(R.color.maximum_temperature));
znames = new ArrayList<>();
znames.add("月能耗");
znames.add("原始能耗");
}
/**
* 展示数据
*/
private void showDataOnChart() {
//绘制图表数据
data = new CombinedData();
//设置折线图数据
data.setData(getLineData());
//设置柱状图数据
data.setData(getBarData());
dataChart.setData(data);
//设置横坐标数据
setAxisXBottom();
//设置右侧纵坐标数据
setAxisYRight();
//设置左侧纵坐标数据
setAxisYLeft();
//不显示描述内容
dataChart.getDescription().setEnabled(false);
dataChart.setDrawOrder(new CombinedChart.DrawOrder[]{
CombinedChart.DrawOrder.BAR,
CombinedChart.DrawOrder.LINE
});
dataChart.setBackgroundColor(Color.WHITE);
dataChart.setDrawGridBackground(false);
dataChart.setDrawBarShadow(false);
dataChart.setHighlightFullBarEnabled(false);
dataChart.setDoubleTapToZoomEnabled(false);// 设置为false以禁止通过在其上双击缩放图表。
//X轴或Y轴禁止缩放
dataChart.setScaleXEnabled(false);
dataChart.setScaleYEnabled(false);
dataChart.setScaleEnabled(false);
//显示边界
dataChart.setDrawBorders(true);
//图例说明
Legend legend = dataChart.getLegend();
legend.setWordWrapEnabled(true);
legend.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM);
legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.CENTER);
legend.setOrientation(Legend.LegendOrientation.HORIZONTAL);
legend.setDrawInside(false);
//Y轴设置
leftAxis = dataChart.getAxisLeft();
rightAxis = dataChart.getAxisRight();
rightAxis.setDrawGridLines(false);
rightAxis.setAxisMinimum(0f);
leftAxis.setDrawGridLines(false);
leftAxis.setAxisMinimum(0f);
dataChart.animateX(2000); // 立即执行的动画,x轴
}
/**
* 设置横坐标数据
*/
private void setAxisXBottom() {
List<String> valuesX = new ArrayList<>();
for (int i = 0;i < datelist.size();i++){
valuesX.add(datelist.get(i));
}
XAxis bottomAxis = dataChart.getXAxis();
bottomAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
bottomAxis.setCenterAxisLabels(true);//设置标签居中
bottomAxis.setValueFormatter(new IndexAxisValueFormatter(valuesX));
// bottomAxis.setAxisMinimum(data.getXMin());
// bottomAxis.setAxisMaximum(data.getXMax() + 0.5f);
bottomAxis.setAxisMinimum(0);//设置最少偏移
bottomAxis.setAxisMaximum(data.getXMax()+0.5f );//设置最大偏移
bottomAxis.setAvoidFirstLastClipping(false);
if (datelist.size()>6){
bottomAxis.setLabelCount(4);//设置X轴标签数量
}else {
bottomAxis.setLabelCount(datelist.size()-1);//设置X轴标签数量
}
}
/**
* 设置右侧纵坐标数据
*/
private void setAxisYRight() {
YAxis right = dataChart.getAxisRight();
right.setValueFormatter(new IAxisValueFormatter() {
@Override
public String getFormattedValue(float value, AxisBase axis) {
return value + "℃";
}
});
right.setDrawGridLines(false);
}
/**
* 设置左侧纵坐标数据
*/
private void setAxisYLeft() {
YAxis left = dataChart.getAxisLeft();
left.setValueFormatter(new IAxisValueFormatter() {
@Override
public String getFormattedValue(float value, AxisBase axis) {
return value + "ml";
}
});
left.setDrawGridLines(false);
}
/**
* 设置折线图绘制数据
* 温度
* @return
*/
public LineData getLineData() {
LineData lineData = new LineData();
for (int i = 0; i < yLineDatas.size(); i++) {
List<Entry> customCounts = new ArrayList<>();
for (int j = 0; j < yLineDatas.get(i).size(); j++) {
//保存数据，曲线图标点不是出于多条柱形图的中间，所以需要设置偏移，就是前面的j+0.5f的存在，如果不加0.5，就会在边缘
customCounts.add(new Entry(j+0.5f, yLineDatas.get(i).get(j)));
}
LineDataSet lineDataSet = new LineDataSet(customCounts, lineNames.get(i));
lineDataSet.setAxisDependency(YAxis.AxisDependency.RIGHT);
lineDataSet.setColor(colors.get(i));
lineDataSet.setCircleColor(colors.get(i));
lineDataSet.setCircleRadius(1);
lineDataSet.setLineWidth(1);
lineDataSet.setValueTextSize(12);
lineDataSet.setValueTextColor(colors.get(i));
lineData.addDataSet(lineDataSet);
}
return lineData;
}
/**
* 设置柱状图绘制数据
*
* @return
*/
public BarData getBarData() {
BarData barData = new BarData();
//总量金额
List<BarEntry> amounts = new ArrayList<>();
//平均金额
List<BarEntry> averages = new ArrayList<>();
//添加数据
for (int i = 0; i < energyList.size(); i++) {
amounts.add(new BarEntry(i,energyList.get(i)));
averages.add(new BarEntry(i,energyOriginalList.get(i)));
}
//设置总数的柱状图
BarDataSet amountBar = new BarDataSet(amounts,"月能耗");
amountBar.setAxisDependency(YAxis.AxisDependency.LEFT);
amountBar.setColor(Color.parseColor("#C23531"));
//设置平均的柱状图
BarDataSet averageBar = new BarDataSet(averages,"实际能耗");
averageBar.setAxisDependency(YAxis.AxisDependency.LEFT);
averageBar.setColor(Color.parseColor("#2F4554"));
amountBar.setValueTextSize(10);
averageBar.setValueTextSize(10);
barData.addDataSet(amountBar);
barData.addDataSet(averageBar);
//设置柱状图显示的大小
float groupSpace = 0.06f;
float barSpace = 0.02f;
float barWidth = 0.45f;
barData.setBarWidth(barWidth);
barData.groupBars(0, groupSpace, barSpace);
return barData;
}
}
下面是其他类型的，
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:orientation="vertical"
tools:context="qnkj.cn.zhuxingtu.MainActivity">
<View
android:id="@+id/dotted_line"
android:layout_width="match_parent"
android:layout_height="5dp"
android:layout_marginLeft="13dp"
android:layout_marginRight="13dp"
android:background="@drawable/bg_dotted_line"
android:layerType="software"
/>
<com.github.mikephil.charting.charts.BarChart
android:layout_width="match_parent"
android:layout_height="200dp"
android:id="@+id/barct"
android:visibility="gone"
></com.github.mikephil.charting.charts.BarChart>
<com.github.mikephil.charting.charts.BarChart
android:layout_width="match_parent"
android:layout_height="200dp"
android:id="@+id/barct2"
android:visibility="gone"
></com.github.mikephil.charting.charts.BarChart>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="@+id/bt1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="bt1"
/>
<Button
android:id="@+id/bt2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="bt2"
/>
</LinearLayout>
<com.github.mikephil.charting.charts.CombinedChart
android:id="@+id/chart1"
android:layout_width="match_parent"
android:layout_height="360dp"
/>
<com.github.mikephil.charting.charts.CombinedChart
android:id="@+id/chart2"
android:layout_width="match_parent"
android:layout_height="360dp"
/>
</LinearLayout>
</ScrollView>
</LinearLayout>
主要类：
扫描二维码关注公众号，回复：
6060648 查看本文章
public class MainActivity extends AppCompatActivity {
private BarChart barct,barct2;
private CombinedChart mCombinedChart1;
private CombinedChart mCombinedChart2;
private Button b1;
private Button b2;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
barct = (BarChart) findViewById(R.id.barct);
barct2 = (BarChart) findViewById(R.id.barct2);
mCombinedChart1 = (CombinedChart) findViewById(R.id.chart1);
mCombinedChart2 = (CombinedChart) findViewById(R.id.chart2);
b1 = (Button) findViewById(R.id.bt1);
b2 = (Button) findViewById(R.id.bt2);
b1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// zhuxingtu();
Intent intent=new Intent(MainActivity.this,ManagerChartActivity.class);
startActivity(intent);
}
});
// b2.setOnClickListener(new View.OnClickListener() {
// @Override
// public void onClick(View v) {
zhuxingtu2();
// }
// });
// testBarChart();
}
private void testBarChart() {
BarChartManager barChartManager1 = new BarChartManager(barct);
BarChartManager barChartManager2 = new BarChartManager(barct2);
//设置x轴的数据
ArrayList<String> xValues0 = new ArrayList<>();
xValues0.add("早晨");
xValues0.add("上午");
xValues0.add("中午");
xValues0.add("下午");
xValues0.add("晚上");
//设置x轴的数据
ArrayList<Float> xValues = new ArrayList<>();
for (int i = 1; i < 6; i++) {
xValues.add((float) i);
}
//设置y轴的数据()
List<List<Float>> yValues = new ArrayList<>();
for (int i = 0; i < 4; i++) {
List<Float> yValue = new ArrayList<>();
for (int j = 0; j < 5; j++) {
yValue.add((float) (
Math.random() * 8)+2);
} yValues.add(yValue);
}
//颜色集合
List<Integer> colors = new ArrayList<>();
colors.add(Color.GREEN);
colors.add(Color.BLUE);
colors.add(Color.RED);
colors.add(Color.CYAN);
//线的名字集合
List<String> names = new ArrayList<>();
names.add("柱状一");
names.add("柱状二");
names.add("柱状三");
names.add("柱状四");
//创建多条柱状的图表
barChartManager1.showBarChart(xValues, yValues.get(0), names.get(1), colors.get(3));
barChartManager2.showBarChart(xValues0, yValues,names);
}
int siz=10;
private void zhuxingtu(){
//x轴数据
List<String> xData = new ArrayList<>();
for (int i = 0; i <= siz; i++) { xData.add(String.valueOf(i));
} //y轴数据集合
List<List<Float>> yBarDatas = new ArrayList<>();
//4种直方图
for (int i = 0; i < 4; i++) { //y轴数
List<Float> yData = new ArrayList<>();
for (int j = 0; j <= siz; j++) { yData.add((float) (Math.random() * 100));
} yBarDatas.add(yData);
} //y轴数据集合
List<List<Float>> yLineDatas = new ArrayList<>();
//4种直方图
for (int i = 0; i < 10; i++) { //y轴数
List<Float> yData = new ArrayList<>();
for (int j = 0; j <= siz; j++) { yData.add((float) (Math.random() * 1000));
} yLineDatas.add(yData);
} //名字集合
List<String> barNames = new ArrayList<>();
barNames.add("直方图一");
barNames.add("直方图二");
barNames.add("直方图三");
barNames.add("直方图四");
barNames.add("直方图五");
barNames.add("直方图六");
barNames.add("直方图七");
barNames.add("直方图八");
barNames.add("直方图九");
barNames.add("直方图十");
//颜色集合
List<Integer> colors = new ArrayList<>();
colors.add(this.getResources().getColor(R.color.blue));
colors.add(this.getResources().getColor(R.color.Crew));
colors.add(this.getResources().getColor(R.color.building_item_max));
colors.add(this.getResources().getColor(R.color.blue_grey));
colors.add(this.getResources().getColor(R.color.cooling_water));
colors.add(this.getResources().getColor(R.color.light_blue));
colors.add(this.getResources().getColor(R.color.light_green));
colors.add(this.getResources().getColor(R.color.home_title));
colors.add(this.getResources().getColor(R.color.text_sign_color));
colors.add(this.getResources().getColor(R.color.zhuji));
List<Integer> colors2 = new ArrayList<>();
colors2.add(Color.BLACK);
colors2.add(Color.MAGENTA);
colors2.add(Color.DKGRAY);
colors2.add(Color.LTGRAY);
//竖状图管理类
List<String> lineNames = new ArrayList<>();
lineNames.add("折线图一");
lineNames.add("折线图二");
lineNames.add("折线图三");
lineNames.add("折线图四");
lineNames.add("折线图五");
lineNames.add("折线图六");
lineNames.add("折线图七");
lineNames.add("折线图八");
lineNames.add("折线图九");
lineNames.add("折线图十");
//管理类
// CombinedChartManager combineChartManager1 = new CombinedChartManager(mCombinedChart1);
// combineChartManager1.showCombinedChart(xData, yBarDatas.get(0), yLineDatas.get(0),
// "直方图", "线性图", colors.get(0), colors.get(1));
// CombinedChartManager combineChartManager2 = new CombinedChartManager(mCombinedChart2);
// combineChartManager2.showCombinedChart(xData, yBarDatas, yLineDatas, barNames, lineNames,
// colors, colors2);
// 一个柱形图，多个曲线图
CombinedChartManager combineChartManager1 = new CombinedChartManager(mCombinedChart1);
combineChartManager1.CylindricalPolygraph(xData, yBarDatas.get(0), yLineDatas,
"直方图", lineNames, colors.get(0), colors);
}
int siz2=10;
private void zhuxingtu2(){
//x轴数据
List<String> xData = new ArrayList<>();
for (int i = 0; i <= siz2; i++) { xData.add(String.valueOf(i));
} //y轴数据集合
List<List<Float>> yBarDatas = new ArrayList<>();
//4种直方图
for (int i = 0; i < 4; i++) { //y轴数
List<Float> yData = new ArrayList<>();
for (int j = 0; j <= siz2; j++) { yData.add((float) (Math.random() * 100));
} yBarDatas.add(yData);
} //y轴数据集合
List<List<Float>> yLineDatas = new ArrayList<>();
//4种直方图
for (int i = 0; i <2; i++) { //y轴数
List<Float> yData = new ArrayList<>();
for (int j = 0; j <= siz2; j++) { yData.add((float) (Math.random() * 1000));
} yLineDatas.add(yData);
} //名字集合
List<String> barNames = new ArrayList<>();
barNames.add("直方图一");
barNames.add("直方图二");
barNames.add("直方图三");
barNames.add("直方图四");
barNames.add("直方图五");
barNames.add("直方图六");
barNames.add("直方图七");
barNames.add("直方图八");
barNames.add("直方图九");
barNames.add("直方图十");
//颜色集合
List<Integer> colors = new ArrayList<>();
colors.add(this.getResources().getColor(R.color.blue));
colors.add(this.getResources().getColor(R.color.cooling_water));
colors.add(this.getResources().getColor(R.color.building_item_max));
colors.add(this.getResources().getColor(R.color.blue_grey));
colors.add(this.getResources().getColor(R.color.cooling_water));
colors.add(this.getResources().getColor(R.color.light_blue));
colors.add(this.getResources().getColor(R.color.light_green));
colors.add(this.getResources().getColor(R.color.home_title));
colors.add(this.getResources().getColor(R.color.text_sign_color));
colors.add(this.getResources().getColor(R.color.zhuji));
List<Integer> colors2 = new ArrayList<>();
colors2.add(Color.BLACK);
colors2.add(Color.MAGENTA);
colors2.add(Color.DKGRAY);
colors2.add(Color.LTGRAY);
//竖状图管理类
List<String> lineNames = new ArrayList<>();
lineNames.add("折线图一");
lineNames.add("折线图二");
lineNames.add("折线图三");
lineNames.add("折线图四");
lineNames.add("折线图五");
lineNames.add("折线图六");
lineNames.add("折线图七");
lineNames.add("折线图八");
lineNames.add("折线图九");
lineNames.add("折线图十");
//管理类
// CombinedChartManager combineChartManager1 = new CombinedChartManager(mCombinedChart1);
// combineChartManager1.showCombinedChart(xData, yBarDatas.get(0), yLineDatas.get(0),
// "直方图", "线性图", colors.get(0), colors.get(1));
CombinedChartManager combineChartManager2 = new CombinedChartManager(mCombinedChart2);
combineChartManager2.showCombinedChart(xData, yBarDatas, yLineDatas, barNames, lineNames,
colors, colors2);
// 一个柱形图，多个曲线图
// CombinedChartManager combineChartManager1 = new CombinedChartManager(mCombinedChart1);
// combineChartManager1.CylindricalPolygraph(xData, yBarDatas.get(0), yLineDatas,
// "直方图", lineNames, colors.get(0), colors);
}
}
工具类
/**
* 柱形曲线图工具类
* Created by IKL on 2019/4/3.
*/
public class CombinedChartManager {
private CombinedChart mCombinedChart;
private YAxis leftAxis;
private YAxis rightAxis;
private XAxis xAxis;
// private final MPChartMarkerView markerView;
public CombinedChartManager(CombinedChart combinedChart) {
this.mCombinedChart = combinedChart;
leftAxis = mCombinedChart.getAxisLeft();
rightAxis = mCombinedChart.getAxisRight();
xAxis = mCombinedChart.getXAxis();
//设置自定义的markerView,点击柱状图后上方显示数据
markerView = new MPChartMarkerView(mCombinedChart.getContext(), R.layout.custom_marker_view);
markerView.setChartView(mCombinedChart);
mCombinedChart.setMarker(markerView);
}
/**
* 初始化Chart
*/
private void initChart() {
//不显示描述内容
mCombinedChart.getDescription().setEnabled(false);
mCombinedChart.setDrawOrder(new CombinedChart.DrawOrder[]{
CombinedChart.DrawOrder.BAR,
CombinedChart.DrawOrder.LINE
});
mCombinedChart.setBackgroundColor(Color.WHITE);
mCombinedChart.setDrawGridBackground(false);
mCombinedChart.setDrawBarShadow(false);
mCombinedChart.setHighlightFullBarEnabled(false);
//显示边界
mCombinedChart.setDrawBorders(true);
//图例说明
Legend legend = mCombinedChart.getLegend();
legend.setWordWrapEnabled(true);
legend.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM);
legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.CENTER);
legend.setOrientation(Legend.LegendOrientation.HORIZONTAL);
legend.setDrawInside(false);
//Y轴设置
rightAxis.setDrawGridLines(false);
rightAxis.setAxisMinimum(0f);
leftAxis.setDrawGridLines(false);
leftAxis.setAxisMinimum(0f);
mCombinedChart.animateX(2000); // 立即执行的动画,x轴
}
/**
* 设置X轴坐标值
*
* @param xAxisValues x轴坐标集合
*/
public void setXAxis(final List<String> xAxisValues) {
//设置X轴在底部
XAxis xAxis = mCombinedChart.getXAxis();
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
xAxis.setGranularity(1f);
// xAxis.setLabelCount(4);
xAxis.setLabelCount(xAxisValues.size() - 1,false);
xAxis.setValueFormatter(new IAxisValueFormatter() {
@Override
public String getFormattedValue(float value, AxisBase axis) {
return xAxisValues.get((int) value % xAxisValues.size());
}
});
mCombinedChart.invalidate();
}
/**
* 得到折线图(一条)
*
* @param lineChartY 折线Y轴值
* @param lineName 折线图名字
* @param lineColor 折线颜色
* @return
*/
private LineData getLineData(List<Float> lineChartY, String lineName, int lineColor) {
LineData lineData = new LineData();
ArrayList<Entry> yValue = new ArrayList<>();
for (int i = 0; i < lineChartY.size(); i++) {
yValue.add(new Entry(i, lineChartY.get(i)));
}
LineDataSet dataSet = new LineDataSet(yValue, lineName);
dataSet.setColor(lineColor);
dataSet.setCircleColor(lineColor);
dataSet.setValueTextColor(lineColor);
dataSet.setCircleSize(1);
//显示值
dataSet.setDrawValues(true);
dataSet.setValueTextSize(10f);
dataSet.setMode(LineDataSet.Mode.CUBIC_BEZIER);
dataSet.setAxisDependency(YAxis.AxisDependency.LEFT);
lineData.addDataSet(dataSet);
return lineData;
}
/**
* 得到折线图(多条)
*
* @param lineChartYs 折线Y轴值
* @param lineNames 折线图名字
* @param lineColors 折线颜色
* @return
*/
private LineData getLineData(List<List<Float>> lineChartYs, List<String> lineNames, List<Integer> lineColors) {
LineData lineData = new LineData();
for (int i = 0; i < lineChartYs.size(); i++) {
ArrayList<Entry> yValues = new ArrayList<>();
for (int j = 0; j < lineChartYs.get(i).size(); j++) {
yValues.add(new Entry(j, lineChartYs.get(i).get(j)));
}
LineDataSet dataSet = new LineDataSet(yValues, lineNames.get(i));
dataSet.setColor(lineColors.get(i));
dataSet.setCircleColor(lineColors.get(i));
dataSet.setValueTextColor(lineColors.get(i));
dataSet.setCircleSize(1);
dataSet.setDrawValues(true);
dataSet.setValueTextSize(10f);
dataSet.setMode(LineDataSet.Mode.LINEAR);
dataSet.setAxisDependency(YAxis.AxisDependency.RIGHT);//Y轴标识设置在右侧
lineData.addDataSet(dataSet);
}
return lineData;
}
/**
* 得到柱状图1条
*
* @param barChartY Y轴值
* @param barName 柱状图名字
* @param barColor 柱状图颜色
* @return
*/
private BarData getBarData(List<Float> barChartY, String barName, int barColor) {
BarData barData = new BarData();
ArrayList<BarEntry> yValues = new ArrayList<>();
for (int i = 0; i < barChartY.size(); i++) {
yValues.add(new BarEntry(i, barChartY.get(i)));
}
BarDataSet barDataSet = new BarDataSet(yValues, barName);
barDataSet.setColor(barColor);
barDataSet.setValueTextSize(10f);
barDataSet.setValueTextColor(barColor);
barDataSet.setAxisDependency(YAxis.AxisDependency.LEFT);
barData.addDataSet(barDataSet);
//以下是为了解决 柱状图 左右两边只显示了一半的问题 根据实际情况 而定
xAxis.setAxisMinimum(-0.5f);
xAxis.setAxisMaximum((float) (barChartY.size()- 0.5));
return barData;
}
/**
* 得到柱状图(多条)
*
* @param barChartYs Y轴值
* @param barNames 柱状图名字
* @param barColors 柱状图颜色
* @return
*/
private BarData getBarData(List<List<Float>> barChartYs, List<String> barNames, List<Integer> barColors) {
List<IBarDataSet> lists = new ArrayList<>();
for (int i = 0; i < barChartYs.size(); i++) {
ArrayList<BarEntry> entries = new ArrayList<>();
for (int j = 0; j < barChartYs.get(i).size(); j++) {
entries.add(new BarEntry(j, barChartYs.get(i).get(j)));
}
BarDataSet barDataSet = new BarDataSet(entries, barNames.get(i));
barDataSet.setColor(barColors.get(i));
barDataSet.setValueTextColor(barColors.get(i));
barDataSet.setValueTextSize(10f);
barDataSet.setAxisDependency(YAxis.AxisDependency.LEFT);//Y轴标识设置在左侧
lists.add(barDataSet);
}
BarData barData = new BarData(lists);
int amount = barChartYs.size(); //需要显示柱状图的类别 数量
float groupSpace = 0.12f; //柱状图组之间的间距
float barSpace = (float) ((1 - 0.12) / amount / 10); // x4 DataSet
float barWidth = (float) ((1 - 0.12) / amount / 10 * 9); // x4 DataSet
// (0.2 + 0.02) * 4 + 0.12 = 1.00 即100% 按照百分百布局
//柱状图宽度
barData.setBarWidth(barWidth);
//(起始点、柱状图组间距、柱状图之间间距)
barData.groupBars(0, groupSpace, barSpace);
return barData;
}
/**
* 显示混合图(柱状图+折线图)1条
*
* @param xAxisValues X轴坐标
* @param barChartY 柱状图Y轴值
* @param lineChartY 折线图Y轴值
* @param barName 柱状图名字
* @param lineName 折线图名字
* @param barColor 柱状图颜色
* @param lineColor 折线图颜色
*/
public void showCombinedChart(
List<String> xAxisValues, List<Float> barChartY, List<Float> lineChartY
, String barName, String lineName, int barColor, int lineColor) {
initChart();
setXAxis(xAxisValues);
CombinedData combinedData = new CombinedData();
combinedData.setData(getBarData(barChartY, barName, barColor));
combinedData.setData(getLineData(lineChartY, lineName, lineColor));
mCombinedChart.setData(combinedData);
mCombinedChart.invalidate();
}
/**
* 显示混合图(柱状图+折线图)多条
*
* @param xAxisValues X轴坐标
* @param barChartYs 柱状图Y轴值
* @param lineChartYs 折线图Y轴值
* @param barNames 柱状图名字
* @param lineNames 折线图名字
* @param barColors 柱状图颜色
* @param lineColors 折线图颜色
*/
public void showCombinedChart(
List<String> xAxisValues, List<List<Float>> barChartYs, List<List<Float>> lineChartYs,
List<String> barNames, List<String> lineNames, List<Integer> barColors, List<Integer> lineColors) {
initChart();
setXAxis(xAxisValues);
CombinedData combinedData = new CombinedData();
combinedData.setData(getBarData(barChartYs, barNames, barColors));
combinedData.setData(getLineData(lineChartYs, lineNames, lineColors));
mCombinedChart.setData(combinedData);
mCombinedChart.invalidate();
}
/**
* 显示混合图(柱状图+折线图)一条柱形图多条曲线图
*
* @param xAxisValues X轴坐标
* @param barChartYs 柱状图Y轴值
* @param lineChartYs 折线图Y轴值
* @param barNames 柱状图名字
* @param lineNames 折线图名字
* @param barColors 柱状图颜色
* @param lineColors 折线图颜色
*/
public void CylindricalPolygraph(
List<String> xAxisValues, List<Float> barChartYs, List<List<Float>> lineChartYs,
String barNames, List<String> lineNames, Integer barColors, List<Integer> lineColors) {
// markerView.setList(lineChartYs);
// markerView.yBarDatas(barChartYs);
initChart();
setXAxis(xAxisValues);
CombinedData combinedData = new CombinedData();
combinedData.setData(getBarData(barChartYs, barNames, barColors));
combinedData.setData(getLineData(lineChartYs, lineNames, lineColors));
mCombinedChart.setData(combinedData);
mCombinedChart.invalidate();
}
}
最后，添加一个点击弹窗吧
/**
* 柱形图点击弹窗显示数据
* Created by IKL on 2018/10/30.
*/
@SuppressLint("ViewConstructor")
public class MPChartMarkerView extends MarkerView {
private TextView tvContent;
private TextView tvContent2;
private TextView tvContent3;
private TextView tvContent4;
private TextView tvContent5;
private List<List<Float>> yValues;
private String name;
private int thread;
private final TextView name1;
private List<Float> barChartYs;
/**
* Constructor. Sets up the MarkerView with a custom layout resource.
*
* @param context
* @param layoutResource the layout resource to use for the MarkerView
*/
public MPChartMarkerView(Context context, int layoutResource) {
super(context, layoutResource);
tvContent = (TextView) findViewById(R.id.tvContent);
tvContent2 = (TextView) findViewById(R.id.tvContent2);
tvContent3 = (TextView) findViewById(R.id.tvContent3);
tvContent4 = (TextView) findViewById(R.id.tvContent4);
tvContent5 = (TextView) findViewById(R.id.tvContent5);
name1 = (TextView) findViewById(R.id.tvContent_name);
}
@Override
public void refreshContent(Entry e, Highlight highlight) {
XAxis xAxis = getChartView().getXAxis();
IAxisValueFormatter valueFormatter = xAxis.getValueFormatter();
String realX = valueFormatter.getFormattedValue(e.getX(),xAxis);
// if (!realX.equals("")) {
int tow = Integer.parseInt(realX);
List<Float> floats1 = yValues.get(0);
List<Float> floats2 = yValues.get(1);
List<Float> floats3 = yValues.get(2);
List<Float> floats4 = yValues.get(3);
Float aFloat1 = floats1.get(tow);
Float aFloat2 = floats2.get(tow);
Float aFloat3 = floats3.get(tow);
Float aFloat4 = floats4.get(tow);
Float aFloat = barChartYs.get(tow);
name1.setText(realX+"");
tvContent.setText("原始能耗"+aFloat);
tvContent2.setText("平均气温："+aFloat2);
tvContent3.setText("最高气温："+aFloat3);
tvContent4.setText("最低气温："+aFloat4);
tvContent5.setText("平均温度原始："+aFloat1);
// }else {
// List<Float> floats1 = yValues.get(0);
// List<Float> floats2 = yValues.get(1);
// List<Float> floats3 = yValues.get(2);
// List<Float> floats4 = yValues.get(3);
//
//
// Float aFloat1 = floats1.get(11);
// Float aFloat2 = floats2.get(11);
// Float aFloat3 = floats3.get(11);
// Float aFloat4 = floats4.get(11);
// tvContent.setText("12月"+"\n原始能耗："+aFloat1+"\n计划能耗："+aFloat2+"\n实际能耗："+aFloat3+"\n节能量："+aFloat4);
// }
// tvContent.setText(tow+":"+String.valueOf(e.getY()));
super.refreshContent(e, highlight);
// if (e instanceof CandleEntry) {
//
// CandleEntry ce = (CandleEntry) e;
//
// float high = ce.getHigh();
// tvContent.setText("" + Utils.formatNumber(high, 0, true));
// } else {
//
// float y = e.getY();
// tvContent.setText("" + Utils.formatNumber(y, 0, true));
// }
//
// super.refreshContent(e, highlight);//必须加上该句话；This sentence must be added.
}
private MPPointF mOffset;
@Override
public MPPointF getOffset() {
if(mOffset == null) {
// center the marker horizontally and vertically
mOffset = new MPPointF(-(getWidth() / 2), -getHeight());
}
return mOffset;
}
public void setList(List<List<Float>> yValues){
this.yValues=yValues;
}
public void yBarDatas(List<Float> barChartYs){
this.barChartYs=barChartYs;
}
public void setName(String name){
this.name=name;
}
}
可能有些乱，因为我是测试后直接粘贴下来的，如果粘贴下来后应该能看的容易点。