搬運工，用來記錄一下
首先來看效果圖：效果圖如下。是折線圖和柱狀圖 組合展示圖表
下面上代碼。
（1）首先布局檔案裡面引入CombinedChart
<com.github.mikephil.charting.charts.CombinedChart
android:id="@+id/combined_chart"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:layout_below="@+id/rl_title"
android:layout_marginRight="5dp"
android:layout_marginBottom="5dp"
/>
下面在activity裡面寫初始化chart和設定資料的一系列代碼
（2）在activity的onCreate方法中。調用initChart。初始化圖表。
/**
* 初始化Chart
*/
private void initChart() {
//不顯示描述内容
combinedChart.getDescription().setEnabled(false);
// combinedChart.setDrawOrder(new CombinedChart.DrawOrder[]{
// CombinedChart.DrawOrder.BAR,
// CombinedChart.DrawOrder.LINE
// });
combinedChart.setBackgroundColor(Color.WHITE);
combinedChart.setDrawGridBackground(false);
combinedChart.setDrawBarShadow(false);
combinedChart.setHighlightFullBarEnabled(false);
//顯示邊界,就是最上面的一條線加粗的
combinedChart.setDrawBorders(false);
combinedChart.setPinchZoom(false);//設定true支援兩個指頭向X、Y軸的縮放，如果為false，隻能支援X或者Y軸的當方向縮放
//設定是否可以拖拽,true可以左右滑動
combinedChart.setDragEnabled(true);
//設定是否可以縮放，false不可以放大縮小
combinedChart.setScaleEnabled(false);
//圖例說明
Legend legend = combinedChart.getLegend();
legend.setEnabled(false); //不顯示圖例 底部的什麼顔色代表什麼的說明
//Y軸設定
combinedChart.getAxisRight().setDrawGridLines(false);
combinedChart.getAxisRight().setAxisMinimum(0f);
combinedChart.getAxisRight().setLabelCount(8, true);
combinedChart.getAxisLeft().setLabelCount(8, true);
// combinedChart.getAxisLeft().setDrawGridLines(false);
combinedChart.getAxisLeft().setAxisMinimum(0f);
// 去掉左右邊線：
// combinedChart.getAxisLeft().setDrawAxisLine(false);
// combinedChart.getAxisRight().setDrawAxisLine(false);
XAxis bottomAxis = combinedChart.getXAxis();
bottomAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
bottomAxis.setGranularity(1f);
bottomAxis.setLabelRotationAngle(-60);//設定x坐标的文字傾斜。為傾斜60°
bottomAxis.setDrawGridLines(false);//去掉x軸的網格豎線
// mCombinedChart.animateX(2000); // 立即執行的動畫,x軸
}
（3）設定chart資料。根據自己的需求。我這裡是網絡通路接口拿到資料之後。調用showDataOnChart
此方法裡面設定x軸的資料。 定義混合圖表的data。然後data裡面放折線圖的資料和柱狀圖的資料。再把data資料設定給combineChart。 調用combinedChart.invalidate()更新資料。
/**
* 展示資料
*/
private void showDataOnChart() {
setAxisXBottom();//設定x軸的資料，并是點選的marketview
//繪制圖表資料
data = new CombinedData();
//設定折線圖資料
data.setData(getLineData());
//設定柱狀圖資料
data.setData(getBarData());
combinedChart.setData(data);//把資料設定給混合圖表
combinedChart.invalidate();//更新資料
combinedChart.setVisibleXRangeMaximum(11);//設定圖表最大可見和最小可見個數。既可以固定可見個數。這樣少了也是固定寬度。不會變大。如果大于可見寬度則可以滑動檢視
combinedChart.setVisibleXRangeMinimum(11);
// combinedChart.animateX(2000);
}
下面看具體的getAxisXBottom()和getLineDate()和getBarDate()的具體方法。這裡的圖例暫時沒用。效果圖的圖例是寫的view。放在圖表上面的布局。遇到的技術問題。都在下面代碼中注釋說明了。 /**
* 設定橫坐标資料
*/
private void setAxisXBottom() {
XAxis bottomAxis = combinedChart.getXAxis();
bottomAxis.setValueFormatter(new ValueFormatter() {
@Override
public String getFormattedValue(float value) {
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 "";
}
}
});
CloudTicketMarkerView barMv = new CloudTicketMarkerView(this, valueList);
combinedChart.setMarker(barMv); // 柱狀圖設定market
if (valueList.size() == 3) {
bottomAxis.setLabelCount(valueList.size(), true);//TODO 解決當隻有3條資料的時候。第二條x軸不顯示橫坐标
} else {
bottomAxis.setLabelCount(valueList.size() - 1, false); //TODO ---這裡的問題解決，x軸一直錯位，或者x軸顯示内容比較亂情況
}
}
/**
* 設定折線圖繪制資料
*
* @return
*/
public LineData getLineData() {
int jineColor = ContextCompat.getColor(this, R.color.hushu_color);
LineData lineData = new LineData();
List<Entry> customCounts = new ArrayList<>();
//人數
for (int i = 0; i < valueList.size(); i++) {
customCounts.add(new Entry(i, valueList.get(i).getHjhs()));
}
LineDataSet lineDataSet = new LineDataSet(customCounts, "平均溫度");
lineDataSet.setAxisDependency(YAxis.AxisDependency.RIGHT);
lineDataSet.setColor(jineColor);
lineDataSet.setCircleColor(jineColor);
lineDataSet.setCircleRadius(3);
lineDataSet.setLineWidth(2);
lineDataSet.setValueTextSize(12);
lineDataSet.setValueTextColor(jineColor);
lineData.addDataSet(lineDataSet);
lineData.setDrawValues(false);//設定是否顯示資料點的數值
return lineData;
}
/**
* 設定柱狀圖繪制資料
*
* @return
*/
public BarData getBarData() {
int hushuColor = ContextCompat.getColor(this, R.color.jine_color);
BarData barData = new BarData();
//總量金額
List<BarEntry> amounts = new ArrayList<>();
//添加資料
for (int i = 0; i < valueList.size(); i++) {
amounts.add(new BarEntry(i, valueList.get(i).getHjje()));
// averages.add(new BarEntry(i,j[i]));
}
//設定總數的柱狀圖
BarDataSet amountBar = new BarDataSet(amounts, "蒸發量");
amountBar.setAxisDependency(YAxis.AxisDependency.LEFT);
amountBar.setColor(hushuColor);
amountBar.setValueTextSize(10);
barData.addDataSet(amountBar);
//設定柱狀圖顯示的大小
float barWidth = 0.4f;
barData.setBarWidth(barWidth);
barData.setDrawValues(false);//設定是否顯示資料點的數值
//以下是為了解決 柱x狀圖 左右兩邊隻顯示了一半的問題 根據實際情況 而定
combinedChart.getXAxis().setAxisMinimum(-0.5f);
combinedChart.getXAxis().setAxisMaximum((float) (amounts.size() - 0.5));
return barData;
}
![與專家面對面：Android開發入門問與答[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)