图表绘制往上有很多文章,基本上涵盖了各种样式,但是!你架不住产品的设计啊,比如,正常的多条柱形图,X轴的显示位置都是在柱形图分割的位置:
但是呢,如果让你将分割显示在对应的柱形图下面呢?
就需要调整X轴,调整后柱形图还会有着可能显示不全的问题,或者是少的问题,如果在加上曲线图呢?曲线图依然是以原有的分割点进行绘制,而不是跟改后的X轴对应的位置,那么就需要调整,很耗费时间:
下面是依赖
compile 'com.github.PhilJay:MPAndroidChart:v3.0.2' compile 'com.squareup.retrofit2:converter-gson:2.4.0'
布局:
然后是实体类,当然,你也可以自己抽出来做成工具类,现在只是为了演示:
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 Listdatelist; private List energyList; private List energyOriginalList; private List maxWeatherList; private List minWeatherList; private List coolingReturn; private List coolingSupply; private List chilledReturn; private List chilledSupply; private List inRoom; private List avgOriginal; private List avgWeatherList; private List > yLineDatas; private List
lineNames; private List colors; private List > enerList; private List
zcolors; private List 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 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 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 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 amounts = new ArrayList<>(); //平均金额 List 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; } }
下面是其他类型的,
主要类:
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轴的数据 ArrayListxValues0 = new ArrayList<>(); xValues0.add("早晨"); xValues0.add("上午"); xValues0.add("中午"); xValues0.add("下午"); xValues0.add("晚上"); //设置x轴的数据 ArrayList xValues = new ArrayList<>(); for (int i = 1; i < 6; i++) { xValues.add((float) i); } //设置y轴的数据() List > yValues = new ArrayList<>(); for (int i = 0; i < 4; i++) { List
yValue = new ArrayList<>(); for (int j = 0; j < 5; j++) { yValue.add((float) ( Math.random() * 8)+2); } yValues.add(yValue); } //颜色集合 List colors = new ArrayList<>(); colors.add(Color.GREEN); colors.add(Color.BLUE); colors.add(Color.RED); colors.add(Color.CYAN); //线的名字集合 List 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 xData = new ArrayList<>(); for (int i = 0; i <= siz; i++) { xData.add(String.valueOf(i)); } //y轴数据集合 List > yBarDatas = new ArrayList<>(); //4种直方图 for (int i = 0; i < 4; i++) { //y轴数 List
yData = new ArrayList<>(); for (int j = 0; j <= siz; j++) { yData.add((float) (Math.random() * 100)); } yBarDatas.add(yData); } //y轴数据集合 List > yLineDatas = new ArrayList<>(); //4种直方图 for (int i = 0; i < 10; i++) { //y轴数 List
yData = new ArrayList<>(); for (int j = 0; j <= siz; j++) { yData.add((float) (Math.random() * 1000)); } yLineDatas.add(yData); } //名字集合 List barNames = new ArrayList<>(); barNames.add("直方图一"); barNames.add("直方图二"); barNames.add("直方图三"); barNames.add("直方图四"); barNames.add("直方图五"); barNames.add("直方图六"); barNames.add("直方图七"); barNames.add("直方图八"); barNames.add("直方图九"); barNames.add("直方图十"); //颜色集合 List 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 colors2 = new ArrayList<>(); colors2.add(Color.BLACK); colors2.add(Color.MAGENTA); colors2.add(Color.DKGRAY); colors2.add(Color.LTGRAY); //竖状图管理类 List 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 xData = new ArrayList<>(); for (int i = 0; i <= siz2; i++) { xData.add(String.valueOf(i)); } //y轴数据集合 List > yBarDatas = new ArrayList<>(); //4种直方图 for (int i = 0; i < 4; i++) { //y轴数 List
yData = new ArrayList<>(); for (int j = 0; j <= siz2; j++) { yData.add((float) (Math.random() * 100)); } yBarDatas.add(yData); } //y轴数据集合 List > yLineDatas = new ArrayList<>(); //4种直方图 for (int i = 0; i <2; i++) { //y轴数 List
yData = new ArrayList<>(); for (int j = 0; j <= siz2; j++) { yData.add((float) (Math.random() * 1000)); } yLineDatas.add(yData); } //名字集合 List barNames = new ArrayList<>(); barNames.add("直方图一"); barNames.add("直方图二"); barNames.add("直方图三"); barNames.add("直方图四"); barNames.add("直方图五"); barNames.add("直方图六"); barNames.add("直方图七"); barNames.add("直方图八"); barNames.add("直方图九"); barNames.add("直方图十"); //颜色集合 List 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 colors2 = new ArrayList<>(); colors2.add(Color.BLACK); colors2.add(Color.MAGENTA); colors2.add(Color.DKGRAY); colors2.add(Color.LTGRAY); //竖状图管理类 List 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 ListxAxisValues) { //设置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 lineChartY, String lineName, int lineColor) { LineData lineData = new LineData(); ArrayList 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 > lineChartYs, List
lineNames, List lineColors) { LineData lineData = new LineData(); for (int i = 0; i < lineChartYs.size(); i++) { ArrayList 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 barChartY, String barName, int barColor) { BarData barData = new BarData(); ArrayList 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 > barChartYs, List
barNames, List barColors) { List lists = new ArrayList<>(); for (int i = 0; i < barChartYs.size(); i++) { ArrayList 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 xAxisValues, List barChartY, List 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 xAxisValues, List > barChartYs, List
> lineChartYs, List
barNames, List lineNames, List barColors, List 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 xAxisValues, List barChartYs, List > lineChartYs, String barNames, List
lineNames, Integer barColors, List 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> yValues; private String name; private int thread; private final TextView name1; private List
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 floats1 = yValues.get(0); List floats2 = yValues.get(1); List floats3 = yValues.get(2); List 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 floats1 = yValues.get(0); // List floats2 = yValues.get(1); // List floats3 = yValues.get(2); // List 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 > yValues){ this.yValues=yValues; } public void yBarDatas(List
barChartYs){ this.barChartYs=barChartYs; } public void setName(String name){ this.name=name; } }
可能有些乱,因为我是测试后直接粘贴下来的,如果粘贴下来后应该能看的容易点。