diff --git a/app/src/main/java/com/casic/br/extensions/LineChart.kt b/app/src/main/java/com/casic/br/extensions/LineChart.kt new file mode 100644 index 0000000..2a4b100 --- /dev/null +++ b/app/src/main/java/com/casic/br/extensions/LineChart.kt @@ -0,0 +1,49 @@ +package com.casic.br.extensions + +import android.content.Context +import com.casic.br.R +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.LineChart +import com.github.mikephil.charting.components.Legend +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.pengxh.kt.lite.extensions.convertColor +import com.pengxh.kt.lite.extensions.sp2px + +fun LineChart.init(context: Context) { + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.red) + this.getPaint(Chart.PAINT_INFO).textSize = 14f.sp2px(context).toFloat() + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.animateY(1200, Easing.EaseInOutQuad) + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f + this.isScaleXEnabled = true //X轴可缩放 + this.isScaleYEnabled = false //Y轴不可缩放 + //设置x轴 + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.lib_text_color.convertColor(context) + xAxis.textSize = 10f + xAxis.setLabelCount(7, true) + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.granularity = 1f //禁止放大后x轴标签重绘 + xAxis.position = XAxis.XAxisPosition.BOTTOM + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //去掉描述 + this.description.isEnabled = false + //设置图例 + val legend = this.legend + legend.orientation = Legend.LegendOrientation.HORIZONTAL + legend.verticalAlignment = Legend.LegendVerticalAlignment.BOTTOM + legend.horizontalAlignment = Legend.LegendHorizontalAlignment.CENTER + //图例是否自动换行 + legend.isWordWrapEnabled = true +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/br/extensions/LineChart.kt b/app/src/main/java/com/casic/br/extensions/LineChart.kt new file mode 100644 index 0000000..2a4b100 --- /dev/null +++ b/app/src/main/java/com/casic/br/extensions/LineChart.kt @@ -0,0 +1,49 @@ +package com.casic.br.extensions + +import android.content.Context +import com.casic.br.R +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.LineChart +import com.github.mikephil.charting.components.Legend +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.pengxh.kt.lite.extensions.convertColor +import com.pengxh.kt.lite.extensions.sp2px + +fun LineChart.init(context: Context) { + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.red) + this.getPaint(Chart.PAINT_INFO).textSize = 14f.sp2px(context).toFloat() + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.animateY(1200, Easing.EaseInOutQuad) + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f + this.isScaleXEnabled = true //X轴可缩放 + this.isScaleYEnabled = false //Y轴不可缩放 + //设置x轴 + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.lib_text_color.convertColor(context) + xAxis.textSize = 10f + xAxis.setLabelCount(7, true) + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.granularity = 1f //禁止放大后x轴标签重绘 + xAxis.position = XAxis.XAxisPosition.BOTTOM + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //去掉描述 + this.description.isEnabled = false + //设置图例 + val legend = this.legend + legend.orientation = Legend.LegendOrientation.HORIZONTAL + legend.verticalAlignment = Legend.LegendVerticalAlignment.BOTTOM + legend.horizontalAlignment = Legend.LegendHorizontalAlignment.CENTER + //图例是否自动换行 + legend.isWordWrapEnabled = true +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/br/model/LineChartEntryModel.java b/app/src/main/java/com/casic/br/model/LineChartEntryModel.java new file mode 100644 index 0000000..bc1da42 --- /dev/null +++ b/app/src/main/java/com/casic/br/model/LineChartEntryModel.java @@ -0,0 +1,29 @@ +package com.casic.br.model; + +import com.github.mikephil.charting.data.Entry; + +import java.util.List; + +public class LineChartEntryModel { + //折线数据 + private List entryList; + + //折线颜色 + private Integer lineColor; + + public List getEntryList() { + return entryList; + } + + public void setEntryList(List entryList) { + this.entryList = entryList; + } + + public Integer getLineColor() { + return lineColor; + } + + public void setLineColor(Integer lineColor) { + this.lineColor = lineColor; + } +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/br/extensions/LineChart.kt b/app/src/main/java/com/casic/br/extensions/LineChart.kt new file mode 100644 index 0000000..2a4b100 --- /dev/null +++ b/app/src/main/java/com/casic/br/extensions/LineChart.kt @@ -0,0 +1,49 @@ +package com.casic.br.extensions + +import android.content.Context +import com.casic.br.R +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.LineChart +import com.github.mikephil.charting.components.Legend +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.pengxh.kt.lite.extensions.convertColor +import com.pengxh.kt.lite.extensions.sp2px + +fun LineChart.init(context: Context) { + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.red) + this.getPaint(Chart.PAINT_INFO).textSize = 14f.sp2px(context).toFloat() + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.animateY(1200, Easing.EaseInOutQuad) + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f + this.isScaleXEnabled = true //X轴可缩放 + this.isScaleYEnabled = false //Y轴不可缩放 + //设置x轴 + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.lib_text_color.convertColor(context) + xAxis.textSize = 10f + xAxis.setLabelCount(7, true) + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.granularity = 1f //禁止放大后x轴标签重绘 + xAxis.position = XAxis.XAxisPosition.BOTTOM + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //去掉描述 + this.description.isEnabled = false + //设置图例 + val legend = this.legend + legend.orientation = Legend.LegendOrientation.HORIZONTAL + legend.verticalAlignment = Legend.LegendVerticalAlignment.BOTTOM + legend.horizontalAlignment = Legend.LegendHorizontalAlignment.CENTER + //图例是否自动换行 + legend.isWordWrapEnabled = true +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/br/model/LineChartEntryModel.java b/app/src/main/java/com/casic/br/model/LineChartEntryModel.java new file mode 100644 index 0000000..bc1da42 --- /dev/null +++ b/app/src/main/java/com/casic/br/model/LineChartEntryModel.java @@ -0,0 +1,29 @@ +package com.casic.br.model; + +import com.github.mikephil.charting.data.Entry; + +import java.util.List; + +public class LineChartEntryModel { + //折线数据 + private List entryList; + + //折线颜色 + private Integer lineColor; + + public List getEntryList() { + return entryList; + } + + public void setEntryList(List entryList) { + this.entryList = entryList; + } + + public Integer getLineColor() { + return lineColor; + } + + public void setLineColor(Integer lineColor) { + this.lineColor = lineColor; + } +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/br/utils/ChartViewHelper.kt b/app/src/main/java/com/casic/br/utils/ChartViewHelper.kt index 3195326..3f5f781 100644 --- a/app/src/main/java/com/casic/br/utils/ChartViewHelper.kt +++ b/app/src/main/java/com/casic/br/utils/ChartViewHelper.kt @@ -2,11 +2,13 @@ import com.casic.br.R import com.casic.br.extensions.init +import com.casic.br.model.LineChartEntryModel +import com.casic.br.widgets.LineChartMarkerView +import com.github.mikephil.charting.charts.LineChart import com.github.mikephil.charting.charts.PieChart -import com.github.mikephil.charting.data.PieData -import com.github.mikephil.charting.data.PieDataSet -import com.github.mikephil.charting.data.PieEntry +import com.github.mikephil.charting.data.* import com.github.mikephil.charting.formatter.ValueFormatter +import com.github.mikephil.charting.interfaces.datasets.ILineDataSet import com.pengxh.kt.lite.extensions.convertColor import java.text.DecimalFormat @@ -18,101 +20,101 @@ * @email 290677893@qq.com */ object ChartViewHelper { -// /** -// * 单条折线图 -// * */ -// fun setSingleLineChartData( -// chart: LineChart, xAxisDate: MutableList, entryModel: LineChartEntryModel -// ) { -// //每次加载数据都初始化折线图 -// chart.init(chart.context) -// if (entryModel.entryList.isEmpty()) { -// return -// } -// //绑定数据 -// val lineDataSets: MutableList = ArrayList() -// //设置数据 -// val dataSet = LineDataSet(entryModel.entryList, entryModel.entryList[0].data.toString()) -// dataSet.setDrawCircles(true) -// //线条颜色 -// dataSet.color = entryModel.lineColor -// //圆点颜色 -// dataSet.setCircleColor(entryModel.lineColor) -// dataSet.setDrawFilled(true) -// dataSet.fillColor = entryModel.lineColor -// dataSet.mode = LineDataSet.Mode.CUBIC_BEZIER -// lineDataSets.add(dataSet) -// -// val lineData = LineData(lineDataSets) -// lineData.setDrawValues(false) -// //添加自定义Marker -// val markerView = LineChartMarkerView(chart.context) -// markerView.chartView = chart -// markerView.setXAxisDate(xAxisDate) -// chart.marker = markerView -// //设置X轴坐标 -// val xAxis = chart.xAxis -// if (xAxisDate.size == 1) { -// xAxis.valueFormatter = object : ValueFormatter() { -// override fun getFormattedValue(value: Float): String { -// return xAxisDate[0] -// } -// } -// } else { -// xAxis.valueFormatter = object : ValueFormatter() { -// override fun getFormattedValue(value: Float): String { -// return xAxisDate[value.toInt()] -// } -// } -// } -// chart.data = lineData -// chart.invalidate() -// } -// -// /** -// * 多条折线图 -// * */ -// fun setLineChartData( -// chart: LineChart, xAxisDate: MutableList, entryModels: List -// ) { -// //每次加载数据都初始化折线图 -// chart.init(chart.context) -// if (entryModels[0].entryList.isEmpty()) { -// return -// } -// //绑定数据 -// val lineDataSets: MutableList = ArrayList() -// entryModels.forEachIndexed { index, it -> -// //设置数据 -// val dataSet = LineDataSet(it.entryList, it.entryList?.get(index)?.data.toString()) -// dataSet.setDrawCircles(true) -// //线条颜色 -// dataSet.color = it.lineColor -// //圆点颜色 -// dataSet.setCircleColor(it.lineColor) -// dataSet.setDrawFilled(true) -// dataSet.fillColor = it.lineColor -// dataSet.mode = LineDataSet.Mode.CUBIC_BEZIER -// lineDataSets.add(dataSet) -// } -// val lineData = LineData(lineDataSets) -// lineData.setDrawValues(false) -// //添加自定义Marker -// val markerView = LineChartMarkerView(chart.context) -// markerView.chartView = chart -// markerView.setXAxisDate(xAxisDate) -// chart.marker = markerView -// //设置X轴坐标 -// val xAxis = chart.xAxis -// xAxis.valueFormatter = object : ValueFormatter() { -// override fun getFormattedValue(value: Float): String { -// return xAxisDate[value.toInt()] -// } -// } -// chart.data = lineData -// chart.invalidate() -// } -// + /** + * 单条折线图 + * */ + fun setSingleLineChartData( + chart: LineChart, xAxisDate: MutableList, entryModel: LineChartEntryModel + ) { + //每次加载数据都初始化折线图 + chart.init(chart.context) + if (entryModel.entryList.isEmpty()) { + return + } + //绑定数据 + val lineDataSets: MutableList = ArrayList() + //设置数据 + val dataSet = LineDataSet(entryModel.entryList, entryModel.entryList[0].data.toString()) + dataSet.setDrawCircles(true) + //线条颜色 + dataSet.color = entryModel.lineColor + //圆点颜色 + dataSet.setCircleColor(entryModel.lineColor) + dataSet.setDrawFilled(true) + dataSet.fillColor = entryModel.lineColor + dataSet.mode = LineDataSet.Mode.CUBIC_BEZIER + lineDataSets.add(dataSet) + + val lineData = LineData(lineDataSets) + lineData.setDrawValues(false) + //添加自定义Marker + val markerView = LineChartMarkerView(chart.context) + markerView.chartView = chart + markerView.setXAxisDate(xAxisDate) + chart.marker = markerView + //设置X轴坐标 + val xAxis = chart.xAxis + if (xAxisDate.size == 1) { + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return xAxisDate[0] + } + } + } else { + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return xAxisDate[value.toInt()] + } + } + } + chart.data = lineData + chart.invalidate() + } + + /** + * 多条折线图 + * */ + fun setLineChartData( + chart: LineChart, xAxisDate: MutableList, entryModels: List + ) { + //每次加载数据都初始化折线图 + chart.init(chart.context) + if (entryModels[0].entryList.isEmpty()) { + return + } + //绑定数据 + val lineDataSets: MutableList = ArrayList() + entryModels.forEachIndexed { index, it -> + //设置数据 + val dataSet = LineDataSet(it.entryList, it.entryList?.get(index)?.data.toString()) + dataSet.setDrawCircles(true) + //线条颜色 + dataSet.color = it.lineColor + //圆点颜色 + dataSet.setCircleColor(it.lineColor) + dataSet.setDrawFilled(true) + dataSet.fillColor = it.lineColor + dataSet.mode = LineDataSet.Mode.CUBIC_BEZIER + lineDataSets.add(dataSet) + } + val lineData = LineData(lineDataSets) + lineData.setDrawValues(false) + //添加自定义Marker + val markerView = LineChartMarkerView(chart.context) + markerView.chartView = chart + markerView.setXAxisDate(xAxisDate) + chart.marker = markerView + //设置X轴坐标 + val xAxis = chart.xAxis + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return xAxisDate[value.toInt()] + } + } + chart.data = lineData + chart.invalidate() + } + // /** // * 竖直柱状图 // * */ diff --git a/app/src/main/java/com/casic/br/extensions/LineChart.kt b/app/src/main/java/com/casic/br/extensions/LineChart.kt new file mode 100644 index 0000000..2a4b100 --- /dev/null +++ b/app/src/main/java/com/casic/br/extensions/LineChart.kt @@ -0,0 +1,49 @@ +package com.casic.br.extensions + +import android.content.Context +import com.casic.br.R +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.LineChart +import com.github.mikephil.charting.components.Legend +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.pengxh.kt.lite.extensions.convertColor +import com.pengxh.kt.lite.extensions.sp2px + +fun LineChart.init(context: Context) { + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.red) + this.getPaint(Chart.PAINT_INFO).textSize = 14f.sp2px(context).toFloat() + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.animateY(1200, Easing.EaseInOutQuad) + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f + this.isScaleXEnabled = true //X轴可缩放 + this.isScaleYEnabled = false //Y轴不可缩放 + //设置x轴 + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.lib_text_color.convertColor(context) + xAxis.textSize = 10f + xAxis.setLabelCount(7, true) + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.granularity = 1f //禁止放大后x轴标签重绘 + xAxis.position = XAxis.XAxisPosition.BOTTOM + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //去掉描述 + this.description.isEnabled = false + //设置图例 + val legend = this.legend + legend.orientation = Legend.LegendOrientation.HORIZONTAL + legend.verticalAlignment = Legend.LegendVerticalAlignment.BOTTOM + legend.horizontalAlignment = Legend.LegendHorizontalAlignment.CENTER + //图例是否自动换行 + legend.isWordWrapEnabled = true +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/br/model/LineChartEntryModel.java b/app/src/main/java/com/casic/br/model/LineChartEntryModel.java new file mode 100644 index 0000000..bc1da42 --- /dev/null +++ b/app/src/main/java/com/casic/br/model/LineChartEntryModel.java @@ -0,0 +1,29 @@ +package com.casic.br.model; + +import com.github.mikephil.charting.data.Entry; + +import java.util.List; + +public class LineChartEntryModel { + //折线数据 + private List entryList; + + //折线颜色 + private Integer lineColor; + + public List getEntryList() { + return entryList; + } + + public void setEntryList(List entryList) { + this.entryList = entryList; + } + + public Integer getLineColor() { + return lineColor; + } + + public void setLineColor(Integer lineColor) { + this.lineColor = lineColor; + } +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/br/utils/ChartViewHelper.kt b/app/src/main/java/com/casic/br/utils/ChartViewHelper.kt index 3195326..3f5f781 100644 --- a/app/src/main/java/com/casic/br/utils/ChartViewHelper.kt +++ b/app/src/main/java/com/casic/br/utils/ChartViewHelper.kt @@ -2,11 +2,13 @@ import com.casic.br.R import com.casic.br.extensions.init +import com.casic.br.model.LineChartEntryModel +import com.casic.br.widgets.LineChartMarkerView +import com.github.mikephil.charting.charts.LineChart import com.github.mikephil.charting.charts.PieChart -import com.github.mikephil.charting.data.PieData -import com.github.mikephil.charting.data.PieDataSet -import com.github.mikephil.charting.data.PieEntry +import com.github.mikephil.charting.data.* import com.github.mikephil.charting.formatter.ValueFormatter +import com.github.mikephil.charting.interfaces.datasets.ILineDataSet import com.pengxh.kt.lite.extensions.convertColor import java.text.DecimalFormat @@ -18,101 +20,101 @@ * @email 290677893@qq.com */ object ChartViewHelper { -// /** -// * 单条折线图 -// * */ -// fun setSingleLineChartData( -// chart: LineChart, xAxisDate: MutableList, entryModel: LineChartEntryModel -// ) { -// //每次加载数据都初始化折线图 -// chart.init(chart.context) -// if (entryModel.entryList.isEmpty()) { -// return -// } -// //绑定数据 -// val lineDataSets: MutableList = ArrayList() -// //设置数据 -// val dataSet = LineDataSet(entryModel.entryList, entryModel.entryList[0].data.toString()) -// dataSet.setDrawCircles(true) -// //线条颜色 -// dataSet.color = entryModel.lineColor -// //圆点颜色 -// dataSet.setCircleColor(entryModel.lineColor) -// dataSet.setDrawFilled(true) -// dataSet.fillColor = entryModel.lineColor -// dataSet.mode = LineDataSet.Mode.CUBIC_BEZIER -// lineDataSets.add(dataSet) -// -// val lineData = LineData(lineDataSets) -// lineData.setDrawValues(false) -// //添加自定义Marker -// val markerView = LineChartMarkerView(chart.context) -// markerView.chartView = chart -// markerView.setXAxisDate(xAxisDate) -// chart.marker = markerView -// //设置X轴坐标 -// val xAxis = chart.xAxis -// if (xAxisDate.size == 1) { -// xAxis.valueFormatter = object : ValueFormatter() { -// override fun getFormattedValue(value: Float): String { -// return xAxisDate[0] -// } -// } -// } else { -// xAxis.valueFormatter = object : ValueFormatter() { -// override fun getFormattedValue(value: Float): String { -// return xAxisDate[value.toInt()] -// } -// } -// } -// chart.data = lineData -// chart.invalidate() -// } -// -// /** -// * 多条折线图 -// * */ -// fun setLineChartData( -// chart: LineChart, xAxisDate: MutableList, entryModels: List -// ) { -// //每次加载数据都初始化折线图 -// chart.init(chart.context) -// if (entryModels[0].entryList.isEmpty()) { -// return -// } -// //绑定数据 -// val lineDataSets: MutableList = ArrayList() -// entryModels.forEachIndexed { index, it -> -// //设置数据 -// val dataSet = LineDataSet(it.entryList, it.entryList?.get(index)?.data.toString()) -// dataSet.setDrawCircles(true) -// //线条颜色 -// dataSet.color = it.lineColor -// //圆点颜色 -// dataSet.setCircleColor(it.lineColor) -// dataSet.setDrawFilled(true) -// dataSet.fillColor = it.lineColor -// dataSet.mode = LineDataSet.Mode.CUBIC_BEZIER -// lineDataSets.add(dataSet) -// } -// val lineData = LineData(lineDataSets) -// lineData.setDrawValues(false) -// //添加自定义Marker -// val markerView = LineChartMarkerView(chart.context) -// markerView.chartView = chart -// markerView.setXAxisDate(xAxisDate) -// chart.marker = markerView -// //设置X轴坐标 -// val xAxis = chart.xAxis -// xAxis.valueFormatter = object : ValueFormatter() { -// override fun getFormattedValue(value: Float): String { -// return xAxisDate[value.toInt()] -// } -// } -// chart.data = lineData -// chart.invalidate() -// } -// + /** + * 单条折线图 + * */ + fun setSingleLineChartData( + chart: LineChart, xAxisDate: MutableList, entryModel: LineChartEntryModel + ) { + //每次加载数据都初始化折线图 + chart.init(chart.context) + if (entryModel.entryList.isEmpty()) { + return + } + //绑定数据 + val lineDataSets: MutableList = ArrayList() + //设置数据 + val dataSet = LineDataSet(entryModel.entryList, entryModel.entryList[0].data.toString()) + dataSet.setDrawCircles(true) + //线条颜色 + dataSet.color = entryModel.lineColor + //圆点颜色 + dataSet.setCircleColor(entryModel.lineColor) + dataSet.setDrawFilled(true) + dataSet.fillColor = entryModel.lineColor + dataSet.mode = LineDataSet.Mode.CUBIC_BEZIER + lineDataSets.add(dataSet) + + val lineData = LineData(lineDataSets) + lineData.setDrawValues(false) + //添加自定义Marker + val markerView = LineChartMarkerView(chart.context) + markerView.chartView = chart + markerView.setXAxisDate(xAxisDate) + chart.marker = markerView + //设置X轴坐标 + val xAxis = chart.xAxis + if (xAxisDate.size == 1) { + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return xAxisDate[0] + } + } + } else { + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return xAxisDate[value.toInt()] + } + } + } + chart.data = lineData + chart.invalidate() + } + + /** + * 多条折线图 + * */ + fun setLineChartData( + chart: LineChart, xAxisDate: MutableList, entryModels: List + ) { + //每次加载数据都初始化折线图 + chart.init(chart.context) + if (entryModels[0].entryList.isEmpty()) { + return + } + //绑定数据 + val lineDataSets: MutableList = ArrayList() + entryModels.forEachIndexed { index, it -> + //设置数据 + val dataSet = LineDataSet(it.entryList, it.entryList?.get(index)?.data.toString()) + dataSet.setDrawCircles(true) + //线条颜色 + dataSet.color = it.lineColor + //圆点颜色 + dataSet.setCircleColor(it.lineColor) + dataSet.setDrawFilled(true) + dataSet.fillColor = it.lineColor + dataSet.mode = LineDataSet.Mode.CUBIC_BEZIER + lineDataSets.add(dataSet) + } + val lineData = LineData(lineDataSets) + lineData.setDrawValues(false) + //添加自定义Marker + val markerView = LineChartMarkerView(chart.context) + markerView.chartView = chart + markerView.setXAxisDate(xAxisDate) + chart.marker = markerView + //设置X轴坐标 + val xAxis = chart.xAxis + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return xAxisDate[value.toInt()] + } + } + chart.data = lineData + chart.invalidate() + } + // /** // * 竖直柱状图 // * */ diff --git a/app/src/main/java/com/casic/br/view/device/waterheater/GasConsumeActivity.kt b/app/src/main/java/com/casic/br/view/device/waterheater/GasConsumeActivity.kt index 4b66384..af1323d 100644 --- a/app/src/main/java/com/casic/br/view/device/waterheater/GasConsumeActivity.kt +++ b/app/src/main/java/com/casic/br/view/device/waterheater/GasConsumeActivity.kt @@ -4,8 +4,12 @@ import com.alibaba.fastjson.JSONObject import com.casic.br.R import com.casic.br.extensions.createCommand +import com.casic.br.model.LineChartEntryModel +import com.casic.br.utils.ChartViewHelper import com.casic.br.utils.CommandManager +import com.casic.br.utils.LocaleConstant import com.casic.br.utils.TuyaDeviceListener +import com.github.mikephil.charting.data.Entry import com.gyf.immersionbar.ImmersionBar import com.pengxh.kt.lite.base.KotlinBaseActivity import com.pengxh.kt.lite.extensions.convertColor @@ -44,7 +48,7 @@ override fun initData() { calendar = Calendar.getInstance() //默认选中 - dateRadioGroup.check(R.id.dayRadioButton) + dateRadioGroup.check(R.id.monthRadioButton) setLineChartData() setDate( @@ -167,7 +171,26 @@ * 设置折线统计数据 * */ private fun setLineChartData() { + val xAxisLabel: MutableList = ArrayList() + val entryModels: MutableList = ArrayList() + val array = arrayListOf("用气量", "用水量") + for (i in 0 until 2) { + //每个entries都是一条折线 + val entries: ArrayList = ArrayList() + val entryModel = LineChartEntryModel() + for (j in 1..31) { + entryModel.lineColor = LocaleConstant.COLORS[i + 2].convertColor(this) + xAxisLabel.add(j.toString()) + + entries.add( + Entry(j.toFloat(), Random().nextFloat() * 10, array[i]) + ) + } + entryModel.entryList = entries + entryModels.add(entryModel) + } + ChartViewHelper.setLineChartData(dataLineChart, xAxisLabel, entryModels) } override fun onDestroy() { diff --git a/app/src/main/java/com/casic/br/extensions/LineChart.kt b/app/src/main/java/com/casic/br/extensions/LineChart.kt new file mode 100644 index 0000000..2a4b100 --- /dev/null +++ b/app/src/main/java/com/casic/br/extensions/LineChart.kt @@ -0,0 +1,49 @@ +package com.casic.br.extensions + +import android.content.Context +import com.casic.br.R +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.LineChart +import com.github.mikephil.charting.components.Legend +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.pengxh.kt.lite.extensions.convertColor +import com.pengxh.kt.lite.extensions.sp2px + +fun LineChart.init(context: Context) { + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.red) + this.getPaint(Chart.PAINT_INFO).textSize = 14f.sp2px(context).toFloat() + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.animateY(1200, Easing.EaseInOutQuad) + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f + this.isScaleXEnabled = true //X轴可缩放 + this.isScaleYEnabled = false //Y轴不可缩放 + //设置x轴 + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.lib_text_color.convertColor(context) + xAxis.textSize = 10f + xAxis.setLabelCount(7, true) + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.granularity = 1f //禁止放大后x轴标签重绘 + xAxis.position = XAxis.XAxisPosition.BOTTOM + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //去掉描述 + this.description.isEnabled = false + //设置图例 + val legend = this.legend + legend.orientation = Legend.LegendOrientation.HORIZONTAL + legend.verticalAlignment = Legend.LegendVerticalAlignment.BOTTOM + legend.horizontalAlignment = Legend.LegendHorizontalAlignment.CENTER + //图例是否自动换行 + legend.isWordWrapEnabled = true +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/br/model/LineChartEntryModel.java b/app/src/main/java/com/casic/br/model/LineChartEntryModel.java new file mode 100644 index 0000000..bc1da42 --- /dev/null +++ b/app/src/main/java/com/casic/br/model/LineChartEntryModel.java @@ -0,0 +1,29 @@ +package com.casic.br.model; + +import com.github.mikephil.charting.data.Entry; + +import java.util.List; + +public class LineChartEntryModel { + //折线数据 + private List entryList; + + //折线颜色 + private Integer lineColor; + + public List getEntryList() { + return entryList; + } + + public void setEntryList(List entryList) { + this.entryList = entryList; + } + + public Integer getLineColor() { + return lineColor; + } + + public void setLineColor(Integer lineColor) { + this.lineColor = lineColor; + } +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/br/utils/ChartViewHelper.kt b/app/src/main/java/com/casic/br/utils/ChartViewHelper.kt index 3195326..3f5f781 100644 --- a/app/src/main/java/com/casic/br/utils/ChartViewHelper.kt +++ b/app/src/main/java/com/casic/br/utils/ChartViewHelper.kt @@ -2,11 +2,13 @@ import com.casic.br.R import com.casic.br.extensions.init +import com.casic.br.model.LineChartEntryModel +import com.casic.br.widgets.LineChartMarkerView +import com.github.mikephil.charting.charts.LineChart import com.github.mikephil.charting.charts.PieChart -import com.github.mikephil.charting.data.PieData -import com.github.mikephil.charting.data.PieDataSet -import com.github.mikephil.charting.data.PieEntry +import com.github.mikephil.charting.data.* import com.github.mikephil.charting.formatter.ValueFormatter +import com.github.mikephil.charting.interfaces.datasets.ILineDataSet import com.pengxh.kt.lite.extensions.convertColor import java.text.DecimalFormat @@ -18,101 +20,101 @@ * @email 290677893@qq.com */ object ChartViewHelper { -// /** -// * 单条折线图 -// * */ -// fun setSingleLineChartData( -// chart: LineChart, xAxisDate: MutableList, entryModel: LineChartEntryModel -// ) { -// //每次加载数据都初始化折线图 -// chart.init(chart.context) -// if (entryModel.entryList.isEmpty()) { -// return -// } -// //绑定数据 -// val lineDataSets: MutableList = ArrayList() -// //设置数据 -// val dataSet = LineDataSet(entryModel.entryList, entryModel.entryList[0].data.toString()) -// dataSet.setDrawCircles(true) -// //线条颜色 -// dataSet.color = entryModel.lineColor -// //圆点颜色 -// dataSet.setCircleColor(entryModel.lineColor) -// dataSet.setDrawFilled(true) -// dataSet.fillColor = entryModel.lineColor -// dataSet.mode = LineDataSet.Mode.CUBIC_BEZIER -// lineDataSets.add(dataSet) -// -// val lineData = LineData(lineDataSets) -// lineData.setDrawValues(false) -// //添加自定义Marker -// val markerView = LineChartMarkerView(chart.context) -// markerView.chartView = chart -// markerView.setXAxisDate(xAxisDate) -// chart.marker = markerView -// //设置X轴坐标 -// val xAxis = chart.xAxis -// if (xAxisDate.size == 1) { -// xAxis.valueFormatter = object : ValueFormatter() { -// override fun getFormattedValue(value: Float): String { -// return xAxisDate[0] -// } -// } -// } else { -// xAxis.valueFormatter = object : ValueFormatter() { -// override fun getFormattedValue(value: Float): String { -// return xAxisDate[value.toInt()] -// } -// } -// } -// chart.data = lineData -// chart.invalidate() -// } -// -// /** -// * 多条折线图 -// * */ -// fun setLineChartData( -// chart: LineChart, xAxisDate: MutableList, entryModels: List -// ) { -// //每次加载数据都初始化折线图 -// chart.init(chart.context) -// if (entryModels[0].entryList.isEmpty()) { -// return -// } -// //绑定数据 -// val lineDataSets: MutableList = ArrayList() -// entryModels.forEachIndexed { index, it -> -// //设置数据 -// val dataSet = LineDataSet(it.entryList, it.entryList?.get(index)?.data.toString()) -// dataSet.setDrawCircles(true) -// //线条颜色 -// dataSet.color = it.lineColor -// //圆点颜色 -// dataSet.setCircleColor(it.lineColor) -// dataSet.setDrawFilled(true) -// dataSet.fillColor = it.lineColor -// dataSet.mode = LineDataSet.Mode.CUBIC_BEZIER -// lineDataSets.add(dataSet) -// } -// val lineData = LineData(lineDataSets) -// lineData.setDrawValues(false) -// //添加自定义Marker -// val markerView = LineChartMarkerView(chart.context) -// markerView.chartView = chart -// markerView.setXAxisDate(xAxisDate) -// chart.marker = markerView -// //设置X轴坐标 -// val xAxis = chart.xAxis -// xAxis.valueFormatter = object : ValueFormatter() { -// override fun getFormattedValue(value: Float): String { -// return xAxisDate[value.toInt()] -// } -// } -// chart.data = lineData -// chart.invalidate() -// } -// + /** + * 单条折线图 + * */ + fun setSingleLineChartData( + chart: LineChart, xAxisDate: MutableList, entryModel: LineChartEntryModel + ) { + //每次加载数据都初始化折线图 + chart.init(chart.context) + if (entryModel.entryList.isEmpty()) { + return + } + //绑定数据 + val lineDataSets: MutableList = ArrayList() + //设置数据 + val dataSet = LineDataSet(entryModel.entryList, entryModel.entryList[0].data.toString()) + dataSet.setDrawCircles(true) + //线条颜色 + dataSet.color = entryModel.lineColor + //圆点颜色 + dataSet.setCircleColor(entryModel.lineColor) + dataSet.setDrawFilled(true) + dataSet.fillColor = entryModel.lineColor + dataSet.mode = LineDataSet.Mode.CUBIC_BEZIER + lineDataSets.add(dataSet) + + val lineData = LineData(lineDataSets) + lineData.setDrawValues(false) + //添加自定义Marker + val markerView = LineChartMarkerView(chart.context) + markerView.chartView = chart + markerView.setXAxisDate(xAxisDate) + chart.marker = markerView + //设置X轴坐标 + val xAxis = chart.xAxis + if (xAxisDate.size == 1) { + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return xAxisDate[0] + } + } + } else { + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return xAxisDate[value.toInt()] + } + } + } + chart.data = lineData + chart.invalidate() + } + + /** + * 多条折线图 + * */ + fun setLineChartData( + chart: LineChart, xAxisDate: MutableList, entryModels: List + ) { + //每次加载数据都初始化折线图 + chart.init(chart.context) + if (entryModels[0].entryList.isEmpty()) { + return + } + //绑定数据 + val lineDataSets: MutableList = ArrayList() + entryModels.forEachIndexed { index, it -> + //设置数据 + val dataSet = LineDataSet(it.entryList, it.entryList?.get(index)?.data.toString()) + dataSet.setDrawCircles(true) + //线条颜色 + dataSet.color = it.lineColor + //圆点颜色 + dataSet.setCircleColor(it.lineColor) + dataSet.setDrawFilled(true) + dataSet.fillColor = it.lineColor + dataSet.mode = LineDataSet.Mode.CUBIC_BEZIER + lineDataSets.add(dataSet) + } + val lineData = LineData(lineDataSets) + lineData.setDrawValues(false) + //添加自定义Marker + val markerView = LineChartMarkerView(chart.context) + markerView.chartView = chart + markerView.setXAxisDate(xAxisDate) + chart.marker = markerView + //设置X轴坐标 + val xAxis = chart.xAxis + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return xAxisDate[value.toInt()] + } + } + chart.data = lineData + chart.invalidate() + } + // /** // * 竖直柱状图 // * */ diff --git a/app/src/main/java/com/casic/br/view/device/waterheater/GasConsumeActivity.kt b/app/src/main/java/com/casic/br/view/device/waterheater/GasConsumeActivity.kt index 4b66384..af1323d 100644 --- a/app/src/main/java/com/casic/br/view/device/waterheater/GasConsumeActivity.kt +++ b/app/src/main/java/com/casic/br/view/device/waterheater/GasConsumeActivity.kt @@ -4,8 +4,12 @@ import com.alibaba.fastjson.JSONObject import com.casic.br.R import com.casic.br.extensions.createCommand +import com.casic.br.model.LineChartEntryModel +import com.casic.br.utils.ChartViewHelper import com.casic.br.utils.CommandManager +import com.casic.br.utils.LocaleConstant import com.casic.br.utils.TuyaDeviceListener +import com.github.mikephil.charting.data.Entry import com.gyf.immersionbar.ImmersionBar import com.pengxh.kt.lite.base.KotlinBaseActivity import com.pengxh.kt.lite.extensions.convertColor @@ -44,7 +48,7 @@ override fun initData() { calendar = Calendar.getInstance() //默认选中 - dateRadioGroup.check(R.id.dayRadioButton) + dateRadioGroup.check(R.id.monthRadioButton) setLineChartData() setDate( @@ -167,7 +171,26 @@ * 设置折线统计数据 * */ private fun setLineChartData() { + val xAxisLabel: MutableList = ArrayList() + val entryModels: MutableList = ArrayList() + val array = arrayListOf("用气量", "用水量") + for (i in 0 until 2) { + //每个entries都是一条折线 + val entries: ArrayList = ArrayList() + val entryModel = LineChartEntryModel() + for (j in 1..31) { + entryModel.lineColor = LocaleConstant.COLORS[i + 2].convertColor(this) + xAxisLabel.add(j.toString()) + + entries.add( + Entry(j.toFloat(), Random().nextFloat() * 10, array[i]) + ) + } + entryModel.entryList = entries + entryModels.add(entryModel) + } + ChartViewHelper.setLineChartData(dataLineChart, xAxisLabel, entryModels) } override fun onDestroy() { diff --git a/app/src/main/java/com/casic/br/widgets/LineChartMarkerView.kt b/app/src/main/java/com/casic/br/widgets/LineChartMarkerView.kt new file mode 100644 index 0000000..5b36468 --- /dev/null +++ b/app/src/main/java/com/casic/br/widgets/LineChartMarkerView.kt @@ -0,0 +1,44 @@ +package com.casic.br.widgets + +import android.content.Context +import android.widget.TextView +import com.casic.br.R +import com.github.mikephil.charting.components.MarkerView +import com.github.mikephil.charting.data.Entry +import com.github.mikephil.charting.highlight.Highlight +import com.github.mikephil.charting.utils.MPPointF +import java.text.DecimalFormat +import java.util.* + +class LineChartMarkerView(context: Context?) : + MarkerView(context, R.layout.popu_line_chart_marker) { + + private val decimalFormat = DecimalFormat("##0.0") + private val dayView: TextView = findViewById(R.id.dayView) + private val dataView: TextView = findViewById(R.id.dataView) + private var xAxisDate: MutableList = ArrayList() + + fun setXAxisDate(date: MutableList) { + this.xAxisDate = date + } + + //每次重绘，会调用此方法刷新数据 + override fun refreshContent(e: Entry, highlight: Highlight) { + super.refreshContent(e, highlight) + val data = e.data as String + try { + dataView.text = + String.format(data + ":" + decimalFormat.format(e.y.toString().toDouble())) + val date = xAxisDate[(e.x).toInt()] + val split = date.split("/") + dayView.text = String.format(Locale.CHINA, "${split[0]}月${split[1]}日") + } catch (e: Exception) { + e.printStackTrace() + } + super.refreshContent(e, highlight) + } + + override fun getOffset(): MPPointF { + return MPPointF((-(width shr 1)).toFloat(), (-height).toFloat()) + } +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/br/extensions/LineChart.kt b/app/src/main/java/com/casic/br/extensions/LineChart.kt new file mode 100644 index 0000000..2a4b100 --- /dev/null +++ b/app/src/main/java/com/casic/br/extensions/LineChart.kt @@ -0,0 +1,49 @@ +package com.casic.br.extensions + +import android.content.Context +import com.casic.br.R +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.LineChart +import com.github.mikephil.charting.components.Legend +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.pengxh.kt.lite.extensions.convertColor +import com.pengxh.kt.lite.extensions.sp2px + +fun LineChart.init(context: Context) { + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.red) + this.getPaint(Chart.PAINT_INFO).textSize = 14f.sp2px(context).toFloat() + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.animateY(1200, Easing.EaseInOutQuad) + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f + this.isScaleXEnabled = true //X轴可缩放 + this.isScaleYEnabled = false //Y轴不可缩放 + //设置x轴 + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.lib_text_color.convertColor(context) + xAxis.textSize = 10f + xAxis.setLabelCount(7, true) + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.granularity = 1f //禁止放大后x轴标签重绘 + xAxis.position = XAxis.XAxisPosition.BOTTOM + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //去掉描述 + this.description.isEnabled = false + //设置图例 + val legend = this.legend + legend.orientation = Legend.LegendOrientation.HORIZONTAL + legend.verticalAlignment = Legend.LegendVerticalAlignment.BOTTOM + legend.horizontalAlignment = Legend.LegendHorizontalAlignment.CENTER + //图例是否自动换行 + legend.isWordWrapEnabled = true +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/br/model/LineChartEntryModel.java b/app/src/main/java/com/casic/br/model/LineChartEntryModel.java new file mode 100644 index 0000000..bc1da42 --- /dev/null +++ b/app/src/main/java/com/casic/br/model/LineChartEntryModel.java @@ -0,0 +1,29 @@ +package com.casic.br.model; + +import com.github.mikephil.charting.data.Entry; + +import java.util.List; + +public class LineChartEntryModel { + //折线数据 + private List entryList; + + //折线颜色 + private Integer lineColor; + + public List getEntryList() { + return entryList; + } + + public void setEntryList(List entryList) { + this.entryList = entryList; + } + + public Integer getLineColor() { + return lineColor; + } + + public void setLineColor(Integer lineColor) { + this.lineColor = lineColor; + } +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/br/utils/ChartViewHelper.kt b/app/src/main/java/com/casic/br/utils/ChartViewHelper.kt index 3195326..3f5f781 100644 --- a/app/src/main/java/com/casic/br/utils/ChartViewHelper.kt +++ b/app/src/main/java/com/casic/br/utils/ChartViewHelper.kt @@ -2,11 +2,13 @@ import com.casic.br.R import com.casic.br.extensions.init +import com.casic.br.model.LineChartEntryModel +import com.casic.br.widgets.LineChartMarkerView +import com.github.mikephil.charting.charts.LineChart import com.github.mikephil.charting.charts.PieChart -import com.github.mikephil.charting.data.PieData -import com.github.mikephil.charting.data.PieDataSet -import com.github.mikephil.charting.data.PieEntry +import com.github.mikephil.charting.data.* import com.github.mikephil.charting.formatter.ValueFormatter +import com.github.mikephil.charting.interfaces.datasets.ILineDataSet import com.pengxh.kt.lite.extensions.convertColor import java.text.DecimalFormat @@ -18,101 +20,101 @@ * @email 290677893@qq.com */ object ChartViewHelper { -// /** -// * 单条折线图 -// * */ -// fun setSingleLineChartData( -// chart: LineChart, xAxisDate: MutableList, entryModel: LineChartEntryModel -// ) { -// //每次加载数据都初始化折线图 -// chart.init(chart.context) -// if (entryModel.entryList.isEmpty()) { -// return -// } -// //绑定数据 -// val lineDataSets: MutableList = ArrayList() -// //设置数据 -// val dataSet = LineDataSet(entryModel.entryList, entryModel.entryList[0].data.toString()) -// dataSet.setDrawCircles(true) -// //线条颜色 -// dataSet.color = entryModel.lineColor -// //圆点颜色 -// dataSet.setCircleColor(entryModel.lineColor) -// dataSet.setDrawFilled(true) -// dataSet.fillColor = entryModel.lineColor -// dataSet.mode = LineDataSet.Mode.CUBIC_BEZIER -// lineDataSets.add(dataSet) -// -// val lineData = LineData(lineDataSets) -// lineData.setDrawValues(false) -// //添加自定义Marker -// val markerView = LineChartMarkerView(chart.context) -// markerView.chartView = chart -// markerView.setXAxisDate(xAxisDate) -// chart.marker = markerView -// //设置X轴坐标 -// val xAxis = chart.xAxis -// if (xAxisDate.size == 1) { -// xAxis.valueFormatter = object : ValueFormatter() { -// override fun getFormattedValue(value: Float): String { -// return xAxisDate[0] -// } -// } -// } else { -// xAxis.valueFormatter = object : ValueFormatter() { -// override fun getFormattedValue(value: Float): String { -// return xAxisDate[value.toInt()] -// } -// } -// } -// chart.data = lineData -// chart.invalidate() -// } -// -// /** -// * 多条折线图 -// * */ -// fun setLineChartData( -// chart: LineChart, xAxisDate: MutableList, entryModels: List -// ) { -// //每次加载数据都初始化折线图 -// chart.init(chart.context) -// if (entryModels[0].entryList.isEmpty()) { -// return -// } -// //绑定数据 -// val lineDataSets: MutableList = ArrayList() -// entryModels.forEachIndexed { index, it -> -// //设置数据 -// val dataSet = LineDataSet(it.entryList, it.entryList?.get(index)?.data.toString()) -// dataSet.setDrawCircles(true) -// //线条颜色 -// dataSet.color = it.lineColor -// //圆点颜色 -// dataSet.setCircleColor(it.lineColor) -// dataSet.setDrawFilled(true) -// dataSet.fillColor = it.lineColor -// dataSet.mode = LineDataSet.Mode.CUBIC_BEZIER -// lineDataSets.add(dataSet) -// } -// val lineData = LineData(lineDataSets) -// lineData.setDrawValues(false) -// //添加自定义Marker -// val markerView = LineChartMarkerView(chart.context) -// markerView.chartView = chart -// markerView.setXAxisDate(xAxisDate) -// chart.marker = markerView -// //设置X轴坐标 -// val xAxis = chart.xAxis -// xAxis.valueFormatter = object : ValueFormatter() { -// override fun getFormattedValue(value: Float): String { -// return xAxisDate[value.toInt()] -// } -// } -// chart.data = lineData -// chart.invalidate() -// } -// + /** + * 单条折线图 + * */ + fun setSingleLineChartData( + chart: LineChart, xAxisDate: MutableList, entryModel: LineChartEntryModel + ) { + //每次加载数据都初始化折线图 + chart.init(chart.context) + if (entryModel.entryList.isEmpty()) { + return + } + //绑定数据 + val lineDataSets: MutableList = ArrayList() + //设置数据 + val dataSet = LineDataSet(entryModel.entryList, entryModel.entryList[0].data.toString()) + dataSet.setDrawCircles(true) + //线条颜色 + dataSet.color = entryModel.lineColor + //圆点颜色 + dataSet.setCircleColor(entryModel.lineColor) + dataSet.setDrawFilled(true) + dataSet.fillColor = entryModel.lineColor + dataSet.mode = LineDataSet.Mode.CUBIC_BEZIER + lineDataSets.add(dataSet) + + val lineData = LineData(lineDataSets) + lineData.setDrawValues(false) + //添加自定义Marker + val markerView = LineChartMarkerView(chart.context) + markerView.chartView = chart + markerView.setXAxisDate(xAxisDate) + chart.marker = markerView + //设置X轴坐标 + val xAxis = chart.xAxis + if (xAxisDate.size == 1) { + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return xAxisDate[0] + } + } + } else { + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return xAxisDate[value.toInt()] + } + } + } + chart.data = lineData + chart.invalidate() + } + + /** + * 多条折线图 + * */ + fun setLineChartData( + chart: LineChart, xAxisDate: MutableList, entryModels: List + ) { + //每次加载数据都初始化折线图 + chart.init(chart.context) + if (entryModels[0].entryList.isEmpty()) { + return + } + //绑定数据 + val lineDataSets: MutableList = ArrayList() + entryModels.forEachIndexed { index, it -> + //设置数据 + val dataSet = LineDataSet(it.entryList, it.entryList?.get(index)?.data.toString()) + dataSet.setDrawCircles(true) + //线条颜色 + dataSet.color = it.lineColor + //圆点颜色 + dataSet.setCircleColor(it.lineColor) + dataSet.setDrawFilled(true) + dataSet.fillColor = it.lineColor + dataSet.mode = LineDataSet.Mode.CUBIC_BEZIER + lineDataSets.add(dataSet) + } + val lineData = LineData(lineDataSets) + lineData.setDrawValues(false) + //添加自定义Marker + val markerView = LineChartMarkerView(chart.context) + markerView.chartView = chart + markerView.setXAxisDate(xAxisDate) + chart.marker = markerView + //设置X轴坐标 + val xAxis = chart.xAxis + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return xAxisDate[value.toInt()] + } + } + chart.data = lineData + chart.invalidate() + } + // /** // * 竖直柱状图 // * */ diff --git a/app/src/main/java/com/casic/br/view/device/waterheater/GasConsumeActivity.kt b/app/src/main/java/com/casic/br/view/device/waterheater/GasConsumeActivity.kt index 4b66384..af1323d 100644 --- a/app/src/main/java/com/casic/br/view/device/waterheater/GasConsumeActivity.kt +++ b/app/src/main/java/com/casic/br/view/device/waterheater/GasConsumeActivity.kt @@ -4,8 +4,12 @@ import com.alibaba.fastjson.JSONObject import com.casic.br.R import com.casic.br.extensions.createCommand +import com.casic.br.model.LineChartEntryModel +import com.casic.br.utils.ChartViewHelper import com.casic.br.utils.CommandManager +import com.casic.br.utils.LocaleConstant import com.casic.br.utils.TuyaDeviceListener +import com.github.mikephil.charting.data.Entry import com.gyf.immersionbar.ImmersionBar import com.pengxh.kt.lite.base.KotlinBaseActivity import com.pengxh.kt.lite.extensions.convertColor @@ -44,7 +48,7 @@ override fun initData() { calendar = Calendar.getInstance() //默认选中 - dateRadioGroup.check(R.id.dayRadioButton) + dateRadioGroup.check(R.id.monthRadioButton) setLineChartData() setDate( @@ -167,7 +171,26 @@ * 设置折线统计数据 * */ private fun setLineChartData() { + val xAxisLabel: MutableList = ArrayList() + val entryModels: MutableList = ArrayList() + val array = arrayListOf("用气量", "用水量") + for (i in 0 until 2) { + //每个entries都是一条折线 + val entries: ArrayList = ArrayList() + val entryModel = LineChartEntryModel() + for (j in 1..31) { + entryModel.lineColor = LocaleConstant.COLORS[i + 2].convertColor(this) + xAxisLabel.add(j.toString()) + + entries.add( + Entry(j.toFloat(), Random().nextFloat() * 10, array[i]) + ) + } + entryModel.entryList = entries + entryModels.add(entryModel) + } + ChartViewHelper.setLineChartData(dataLineChart, xAxisLabel, entryModels) } override fun onDestroy() { diff --git a/app/src/main/java/com/casic/br/widgets/LineChartMarkerView.kt b/app/src/main/java/com/casic/br/widgets/LineChartMarkerView.kt new file mode 100644 index 0000000..5b36468 --- /dev/null +++ b/app/src/main/java/com/casic/br/widgets/LineChartMarkerView.kt @@ -0,0 +1,44 @@ +package com.casic.br.widgets + +import android.content.Context +import android.widget.TextView +import com.casic.br.R +import com.github.mikephil.charting.components.MarkerView +import com.github.mikephil.charting.data.Entry +import com.github.mikephil.charting.highlight.Highlight +import com.github.mikephil.charting.utils.MPPointF +import java.text.DecimalFormat +import java.util.* + +class LineChartMarkerView(context: Context?) : + MarkerView(context, R.layout.popu_line_chart_marker) { + + private val decimalFormat = DecimalFormat("##0.0") + private val dayView: TextView = findViewById(R.id.dayView) + private val dataView: TextView = findViewById(R.id.dataView) + private var xAxisDate: MutableList = ArrayList() + + fun setXAxisDate(date: MutableList) { + this.xAxisDate = date + } + + //每次重绘，会调用此方法刷新数据 + override fun refreshContent(e: Entry, highlight: Highlight) { + super.refreshContent(e, highlight) + val data = e.data as String + try { + dataView.text = + String.format(data + ":" + decimalFormat.format(e.y.toString().toDouble())) + val date = xAxisDate[(e.x).toInt()] + val split = date.split("/") + dayView.text = String.format(Locale.CHINA, "${split[0]}月${split[1]}日") + } catch (e: Exception) { + e.printStackTrace() + } + super.refreshContent(e, highlight) + } + + override fun getOffset(): MPPointF { + return MPPointF((-(width shr 1)).toFloat(), (-height).toFloat()) + } +} \ No newline at end of file diff --git a/app/src/main/res/drawable/bg_stroke_layout_blue.xml b/app/src/main/res/drawable/bg_stroke_layout_blue.xml new file mode 100644 index 0000000..26ddc25 --- /dev/null +++ b/app/src/main/res/drawable/bg_stroke_layout_blue.xml @@ -0,0 +1,11 @@ + + + + + + + + \ No newline at end of file diff --git a/app/src/main/java/com/casic/br/extensions/LineChart.kt b/app/src/main/java/com/casic/br/extensions/LineChart.kt new file mode 100644 index 0000000..2a4b100 --- /dev/null +++ b/app/src/main/java/com/casic/br/extensions/LineChart.kt @@ -0,0 +1,49 @@ +package com.casic.br.extensions + +import android.content.Context +import com.casic.br.R +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.LineChart +import com.github.mikephil.charting.components.Legend +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.pengxh.kt.lite.extensions.convertColor +import com.pengxh.kt.lite.extensions.sp2px + +fun LineChart.init(context: Context) { + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.red) + this.getPaint(Chart.PAINT_INFO).textSize = 14f.sp2px(context).toFloat() + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.animateY(1200, Easing.EaseInOutQuad) + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f + this.isScaleXEnabled = true //X轴可缩放 + this.isScaleYEnabled = false //Y轴不可缩放 + //设置x轴 + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.lib_text_color.convertColor(context) + xAxis.textSize = 10f + xAxis.setLabelCount(7, true) + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.granularity = 1f //禁止放大后x轴标签重绘 + xAxis.position = XAxis.XAxisPosition.BOTTOM + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //去掉描述 + this.description.isEnabled = false + //设置图例 + val legend = this.legend + legend.orientation = Legend.LegendOrientation.HORIZONTAL + legend.verticalAlignment = Legend.LegendVerticalAlignment.BOTTOM + legend.horizontalAlignment = Legend.LegendHorizontalAlignment.CENTER + //图例是否自动换行 + legend.isWordWrapEnabled = true +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/br/model/LineChartEntryModel.java b/app/src/main/java/com/casic/br/model/LineChartEntryModel.java new file mode 100644 index 0000000..bc1da42 --- /dev/null +++ b/app/src/main/java/com/casic/br/model/LineChartEntryModel.java @@ -0,0 +1,29 @@ +package com.casic.br.model; + +import com.github.mikephil.charting.data.Entry; + +import java.util.List; + +public class LineChartEntryModel { + //折线数据 + private List entryList; + + //折线颜色 + private Integer lineColor; + + public List getEntryList() { + return entryList; + } + + public void setEntryList(List entryList) { + this.entryList = entryList; + } + + public Integer getLineColor() { + return lineColor; + } + + public void setLineColor(Integer lineColor) { + this.lineColor = lineColor; + } +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/br/utils/ChartViewHelper.kt b/app/src/main/java/com/casic/br/utils/ChartViewHelper.kt index 3195326..3f5f781 100644 --- a/app/src/main/java/com/casic/br/utils/ChartViewHelper.kt +++ b/app/src/main/java/com/casic/br/utils/ChartViewHelper.kt @@ -2,11 +2,13 @@ import com.casic.br.R import com.casic.br.extensions.init +import com.casic.br.model.LineChartEntryModel +import com.casic.br.widgets.LineChartMarkerView +import com.github.mikephil.charting.charts.LineChart import com.github.mikephil.charting.charts.PieChart -import com.github.mikephil.charting.data.PieData -import com.github.mikephil.charting.data.PieDataSet -import com.github.mikephil.charting.data.PieEntry +import com.github.mikephil.charting.data.* import com.github.mikephil.charting.formatter.ValueFormatter +import com.github.mikephil.charting.interfaces.datasets.ILineDataSet import com.pengxh.kt.lite.extensions.convertColor import java.text.DecimalFormat @@ -18,101 +20,101 @@ * @email 290677893@qq.com */ object ChartViewHelper { -// /** -// * 单条折线图 -// * */ -// fun setSingleLineChartData( -// chart: LineChart, xAxisDate: MutableList, entryModel: LineChartEntryModel -// ) { -// //每次加载数据都初始化折线图 -// chart.init(chart.context) -// if (entryModel.entryList.isEmpty()) { -// return -// } -// //绑定数据 -// val lineDataSets: MutableList = ArrayList() -// //设置数据 -// val dataSet = LineDataSet(entryModel.entryList, entryModel.entryList[0].data.toString()) -// dataSet.setDrawCircles(true) -// //线条颜色 -// dataSet.color = entryModel.lineColor -// //圆点颜色 -// dataSet.setCircleColor(entryModel.lineColor) -// dataSet.setDrawFilled(true) -// dataSet.fillColor = entryModel.lineColor -// dataSet.mode = LineDataSet.Mode.CUBIC_BEZIER -// lineDataSets.add(dataSet) -// -// val lineData = LineData(lineDataSets) -// lineData.setDrawValues(false) -// //添加自定义Marker -// val markerView = LineChartMarkerView(chart.context) -// markerView.chartView = chart -// markerView.setXAxisDate(xAxisDate) -// chart.marker = markerView -// //设置X轴坐标 -// val xAxis = chart.xAxis -// if (xAxisDate.size == 1) { -// xAxis.valueFormatter = object : ValueFormatter() { -// override fun getFormattedValue(value: Float): String { -// return xAxisDate[0] -// } -// } -// } else { -// xAxis.valueFormatter = object : ValueFormatter() { -// override fun getFormattedValue(value: Float): String { -// return xAxisDate[value.toInt()] -// } -// } -// } -// chart.data = lineData -// chart.invalidate() -// } -// -// /** -// * 多条折线图 -// * */ -// fun setLineChartData( -// chart: LineChart, xAxisDate: MutableList, entryModels: List -// ) { -// //每次加载数据都初始化折线图 -// chart.init(chart.context) -// if (entryModels[0].entryList.isEmpty()) { -// return -// } -// //绑定数据 -// val lineDataSets: MutableList = ArrayList() -// entryModels.forEachIndexed { index, it -> -// //设置数据 -// val dataSet = LineDataSet(it.entryList, it.entryList?.get(index)?.data.toString()) -// dataSet.setDrawCircles(true) -// //线条颜色 -// dataSet.color = it.lineColor -// //圆点颜色 -// dataSet.setCircleColor(it.lineColor) -// dataSet.setDrawFilled(true) -// dataSet.fillColor = it.lineColor -// dataSet.mode = LineDataSet.Mode.CUBIC_BEZIER -// lineDataSets.add(dataSet) -// } -// val lineData = LineData(lineDataSets) -// lineData.setDrawValues(false) -// //添加自定义Marker -// val markerView = LineChartMarkerView(chart.context) -// markerView.chartView = chart -// markerView.setXAxisDate(xAxisDate) -// chart.marker = markerView -// //设置X轴坐标 -// val xAxis = chart.xAxis -// xAxis.valueFormatter = object : ValueFormatter() { -// override fun getFormattedValue(value: Float): String { -// return xAxisDate[value.toInt()] -// } -// } -// chart.data = lineData -// chart.invalidate() -// } -// + /** + * 单条折线图 + * */ + fun setSingleLineChartData( + chart: LineChart, xAxisDate: MutableList, entryModel: LineChartEntryModel + ) { + //每次加载数据都初始化折线图 + chart.init(chart.context) + if (entryModel.entryList.isEmpty()) { + return + } + //绑定数据 + val lineDataSets: MutableList = ArrayList() + //设置数据 + val dataSet = LineDataSet(entryModel.entryList, entryModel.entryList[0].data.toString()) + dataSet.setDrawCircles(true) + //线条颜色 + dataSet.color = entryModel.lineColor + //圆点颜色 + dataSet.setCircleColor(entryModel.lineColor) + dataSet.setDrawFilled(true) + dataSet.fillColor = entryModel.lineColor + dataSet.mode = LineDataSet.Mode.CUBIC_BEZIER + lineDataSets.add(dataSet) + + val lineData = LineData(lineDataSets) + lineData.setDrawValues(false) + //添加自定义Marker + val markerView = LineChartMarkerView(chart.context) + markerView.chartView = chart + markerView.setXAxisDate(xAxisDate) + chart.marker = markerView + //设置X轴坐标 + val xAxis = chart.xAxis + if (xAxisDate.size == 1) { + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return xAxisDate[0] + } + } + } else { + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return xAxisDate[value.toInt()] + } + } + } + chart.data = lineData + chart.invalidate() + } + + /** + * 多条折线图 + * */ + fun setLineChartData( + chart: LineChart, xAxisDate: MutableList, entryModels: List + ) { + //每次加载数据都初始化折线图 + chart.init(chart.context) + if (entryModels[0].entryList.isEmpty()) { + return + } + //绑定数据 + val lineDataSets: MutableList = ArrayList() + entryModels.forEachIndexed { index, it -> + //设置数据 + val dataSet = LineDataSet(it.entryList, it.entryList?.get(index)?.data.toString()) + dataSet.setDrawCircles(true) + //线条颜色 + dataSet.color = it.lineColor + //圆点颜色 + dataSet.setCircleColor(it.lineColor) + dataSet.setDrawFilled(true) + dataSet.fillColor = it.lineColor + dataSet.mode = LineDataSet.Mode.CUBIC_BEZIER + lineDataSets.add(dataSet) + } + val lineData = LineData(lineDataSets) + lineData.setDrawValues(false) + //添加自定义Marker + val markerView = LineChartMarkerView(chart.context) + markerView.chartView = chart + markerView.setXAxisDate(xAxisDate) + chart.marker = markerView + //设置X轴坐标 + val xAxis = chart.xAxis + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return xAxisDate[value.toInt()] + } + } + chart.data = lineData + chart.invalidate() + } + // /** // * 竖直柱状图 // * */ diff --git a/app/src/main/java/com/casic/br/view/device/waterheater/GasConsumeActivity.kt b/app/src/main/java/com/casic/br/view/device/waterheater/GasConsumeActivity.kt index 4b66384..af1323d 100644 --- a/app/src/main/java/com/casic/br/view/device/waterheater/GasConsumeActivity.kt +++ b/app/src/main/java/com/casic/br/view/device/waterheater/GasConsumeActivity.kt @@ -4,8 +4,12 @@ import com.alibaba.fastjson.JSONObject import com.casic.br.R import com.casic.br.extensions.createCommand +import com.casic.br.model.LineChartEntryModel +import com.casic.br.utils.ChartViewHelper import com.casic.br.utils.CommandManager +import com.casic.br.utils.LocaleConstant import com.casic.br.utils.TuyaDeviceListener +import com.github.mikephil.charting.data.Entry import com.gyf.immersionbar.ImmersionBar import com.pengxh.kt.lite.base.KotlinBaseActivity import com.pengxh.kt.lite.extensions.convertColor @@ -44,7 +48,7 @@ override fun initData() { calendar = Calendar.getInstance() //默认选中 - dateRadioGroup.check(R.id.dayRadioButton) + dateRadioGroup.check(R.id.monthRadioButton) setLineChartData() setDate( @@ -167,7 +171,26 @@ * 设置折线统计数据 * */ private fun setLineChartData() { + val xAxisLabel: MutableList = ArrayList() + val entryModels: MutableList = ArrayList() + val array = arrayListOf("用气量", "用水量") + for (i in 0 until 2) { + //每个entries都是一条折线 + val entries: ArrayList = ArrayList() + val entryModel = LineChartEntryModel() + for (j in 1..31) { + entryModel.lineColor = LocaleConstant.COLORS[i + 2].convertColor(this) + xAxisLabel.add(j.toString()) + + entries.add( + Entry(j.toFloat(), Random().nextFloat() * 10, array[i]) + ) + } + entryModel.entryList = entries + entryModels.add(entryModel) + } + ChartViewHelper.setLineChartData(dataLineChart, xAxisLabel, entryModels) } override fun onDestroy() { diff --git a/app/src/main/java/com/casic/br/widgets/LineChartMarkerView.kt b/app/src/main/java/com/casic/br/widgets/LineChartMarkerView.kt new file mode 100644 index 0000000..5b36468 --- /dev/null +++ b/app/src/main/java/com/casic/br/widgets/LineChartMarkerView.kt @@ -0,0 +1,44 @@ +package com.casic.br.widgets + +import android.content.Context +import android.widget.TextView +import com.casic.br.R +import com.github.mikephil.charting.components.MarkerView +import com.github.mikephil.charting.data.Entry +import com.github.mikephil.charting.highlight.Highlight +import com.github.mikephil.charting.utils.MPPointF +import java.text.DecimalFormat +import java.util.* + +class LineChartMarkerView(context: Context?) : + MarkerView(context, R.layout.popu_line_chart_marker) { + + private val decimalFormat = DecimalFormat("##0.0") + private val dayView: TextView = findViewById(R.id.dayView) + private val dataView: TextView = findViewById(R.id.dataView) + private var xAxisDate: MutableList = ArrayList() + + fun setXAxisDate(date: MutableList) { + this.xAxisDate = date + } + + //每次重绘，会调用此方法刷新数据 + override fun refreshContent(e: Entry, highlight: Highlight) { + super.refreshContent(e, highlight) + val data = e.data as String + try { + dataView.text = + String.format(data + ":" + decimalFormat.format(e.y.toString().toDouble())) + val date = xAxisDate[(e.x).toInt()] + val split = date.split("/") + dayView.text = String.format(Locale.CHINA, "${split[0]}月${split[1]}日") + } catch (e: Exception) { + e.printStackTrace() + } + super.refreshContent(e, highlight) + } + + override fun getOffset(): MPPointF { + return MPPointF((-(width shr 1)).toFloat(), (-height).toFloat()) + } +} \ No newline at end of file diff --git a/app/src/main/res/drawable/bg_stroke_layout_blue.xml b/app/src/main/res/drawable/bg_stroke_layout_blue.xml new file mode 100644 index 0000000..26ddc25 --- /dev/null +++ b/app/src/main/res/drawable/bg_stroke_layout_blue.xml @@ -0,0 +1,11 @@ + + + + + + + + \ No newline at end of file diff --git a/app/src/main/res/drawable/bg_text_tag_blue.xml b/app/src/main/res/drawable/bg_text_tag_blue.xml new file mode 100644 index 0000000..6b497b0 --- /dev/null +++ b/app/src/main/res/drawable/bg_text_tag_blue.xml @@ -0,0 +1,9 @@ + + + + + + \ No newline at end of file diff --git a/app/src/main/java/com/casic/br/extensions/LineChart.kt b/app/src/main/java/com/casic/br/extensions/LineChart.kt new file mode 100644 index 0000000..2a4b100 --- /dev/null +++ b/app/src/main/java/com/casic/br/extensions/LineChart.kt @@ -0,0 +1,49 @@ +package com.casic.br.extensions + +import android.content.Context +import com.casic.br.R +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.LineChart +import com.github.mikephil.charting.components.Legend +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.pengxh.kt.lite.extensions.convertColor +import com.pengxh.kt.lite.extensions.sp2px + +fun LineChart.init(context: Context) { + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.red) + this.getPaint(Chart.PAINT_INFO).textSize = 14f.sp2px(context).toFloat() + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.animateY(1200, Easing.EaseInOutQuad) + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f + this.isScaleXEnabled = true //X轴可缩放 + this.isScaleYEnabled = false //Y轴不可缩放 + //设置x轴 + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.lib_text_color.convertColor(context) + xAxis.textSize = 10f + xAxis.setLabelCount(7, true) + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.granularity = 1f //禁止放大后x轴标签重绘 + xAxis.position = XAxis.XAxisPosition.BOTTOM + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //去掉描述 + this.description.isEnabled = false + //设置图例 + val legend = this.legend + legend.orientation = Legend.LegendOrientation.HORIZONTAL + legend.verticalAlignment = Legend.LegendVerticalAlignment.BOTTOM + legend.horizontalAlignment = Legend.LegendHorizontalAlignment.CENTER + //图例是否自动换行 + legend.isWordWrapEnabled = true +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/br/model/LineChartEntryModel.java b/app/src/main/java/com/casic/br/model/LineChartEntryModel.java new file mode 100644 index 0000000..bc1da42 --- /dev/null +++ b/app/src/main/java/com/casic/br/model/LineChartEntryModel.java @@ -0,0 +1,29 @@ +package com.casic.br.model; + +import com.github.mikephil.charting.data.Entry; + +import java.util.List; + +public class LineChartEntryModel { + //折线数据 + private List entryList; + + //折线颜色 + private Integer lineColor; + + public List getEntryList() { + return entryList; + } + + public void setEntryList(List entryList) { + this.entryList = entryList; + } + + public Integer getLineColor() { + return lineColor; + } + + public void setLineColor(Integer lineColor) { + this.lineColor = lineColor; + } +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/br/utils/ChartViewHelper.kt b/app/src/main/java/com/casic/br/utils/ChartViewHelper.kt index 3195326..3f5f781 100644 --- a/app/src/main/java/com/casic/br/utils/ChartViewHelper.kt +++ b/app/src/main/java/com/casic/br/utils/ChartViewHelper.kt @@ -2,11 +2,13 @@ import com.casic.br.R import com.casic.br.extensions.init +import com.casic.br.model.LineChartEntryModel +import com.casic.br.widgets.LineChartMarkerView +import com.github.mikephil.charting.charts.LineChart import com.github.mikephil.charting.charts.PieChart -import com.github.mikephil.charting.data.PieData -import com.github.mikephil.charting.data.PieDataSet -import com.github.mikephil.charting.data.PieEntry +import com.github.mikephil.charting.data.* import com.github.mikephil.charting.formatter.ValueFormatter +import com.github.mikephil.charting.interfaces.datasets.ILineDataSet import com.pengxh.kt.lite.extensions.convertColor import java.text.DecimalFormat @@ -18,101 +20,101 @@ * @email 290677893@qq.com */ object ChartViewHelper { -// /** -// * 单条折线图 -// * */ -// fun setSingleLineChartData( -// chart: LineChart, xAxisDate: MutableList, entryModel: LineChartEntryModel -// ) { -// //每次加载数据都初始化折线图 -// chart.init(chart.context) -// if (entryModel.entryList.isEmpty()) { -// return -// } -// //绑定数据 -// val lineDataSets: MutableList = ArrayList() -// //设置数据 -// val dataSet = LineDataSet(entryModel.entryList, entryModel.entryList[0].data.toString()) -// dataSet.setDrawCircles(true) -// //线条颜色 -// dataSet.color = entryModel.lineColor -// //圆点颜色 -// dataSet.setCircleColor(entryModel.lineColor) -// dataSet.setDrawFilled(true) -// dataSet.fillColor = entryModel.lineColor -// dataSet.mode = LineDataSet.Mode.CUBIC_BEZIER -// lineDataSets.add(dataSet) -// -// val lineData = LineData(lineDataSets) -// lineData.setDrawValues(false) -// //添加自定义Marker -// val markerView = LineChartMarkerView(chart.context) -// markerView.chartView = chart -// markerView.setXAxisDate(xAxisDate) -// chart.marker = markerView -// //设置X轴坐标 -// val xAxis = chart.xAxis -// if (xAxisDate.size == 1) { -// xAxis.valueFormatter = object : ValueFormatter() { -// override fun getFormattedValue(value: Float): String { -// return xAxisDate[0] -// } -// } -// } else { -// xAxis.valueFormatter = object : ValueFormatter() { -// override fun getFormattedValue(value: Float): String { -// return xAxisDate[value.toInt()] -// } -// } -// } -// chart.data = lineData -// chart.invalidate() -// } -// -// /** -// * 多条折线图 -// * */ -// fun setLineChartData( -// chart: LineChart, xAxisDate: MutableList, entryModels: List -// ) { -// //每次加载数据都初始化折线图 -// chart.init(chart.context) -// if (entryModels[0].entryList.isEmpty()) { -// return -// } -// //绑定数据 -// val lineDataSets: MutableList = ArrayList() -// entryModels.forEachIndexed { index, it -> -// //设置数据 -// val dataSet = LineDataSet(it.entryList, it.entryList?.get(index)?.data.toString()) -// dataSet.setDrawCircles(true) -// //线条颜色 -// dataSet.color = it.lineColor -// //圆点颜色 -// dataSet.setCircleColor(it.lineColor) -// dataSet.setDrawFilled(true) -// dataSet.fillColor = it.lineColor -// dataSet.mode = LineDataSet.Mode.CUBIC_BEZIER -// lineDataSets.add(dataSet) -// } -// val lineData = LineData(lineDataSets) -// lineData.setDrawValues(false) -// //添加自定义Marker -// val markerView = LineChartMarkerView(chart.context) -// markerView.chartView = chart -// markerView.setXAxisDate(xAxisDate) -// chart.marker = markerView -// //设置X轴坐标 -// val xAxis = chart.xAxis -// xAxis.valueFormatter = object : ValueFormatter() { -// override fun getFormattedValue(value: Float): String { -// return xAxisDate[value.toInt()] -// } -// } -// chart.data = lineData -// chart.invalidate() -// } -// + /** + * 单条折线图 + * */ + fun setSingleLineChartData( + chart: LineChart, xAxisDate: MutableList, entryModel: LineChartEntryModel + ) { + //每次加载数据都初始化折线图 + chart.init(chart.context) + if (entryModel.entryList.isEmpty()) { + return + } + //绑定数据 + val lineDataSets: MutableList = ArrayList() + //设置数据 + val dataSet = LineDataSet(entryModel.entryList, entryModel.entryList[0].data.toString()) + dataSet.setDrawCircles(true) + //线条颜色 + dataSet.color = entryModel.lineColor + //圆点颜色 + dataSet.setCircleColor(entryModel.lineColor) + dataSet.setDrawFilled(true) + dataSet.fillColor = entryModel.lineColor + dataSet.mode = LineDataSet.Mode.CUBIC_BEZIER + lineDataSets.add(dataSet) + + val lineData = LineData(lineDataSets) + lineData.setDrawValues(false) + //添加自定义Marker + val markerView = LineChartMarkerView(chart.context) + markerView.chartView = chart + markerView.setXAxisDate(xAxisDate) + chart.marker = markerView + //设置X轴坐标 + val xAxis = chart.xAxis + if (xAxisDate.size == 1) { + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return xAxisDate[0] + } + } + } else { + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return xAxisDate[value.toInt()] + } + } + } + chart.data = lineData + chart.invalidate() + } + + /** + * 多条折线图 + * */ + fun setLineChartData( + chart: LineChart, xAxisDate: MutableList, entryModels: List + ) { + //每次加载数据都初始化折线图 + chart.init(chart.context) + if (entryModels[0].entryList.isEmpty()) { + return + } + //绑定数据 + val lineDataSets: MutableList = ArrayList() + entryModels.forEachIndexed { index, it -> + //设置数据 + val dataSet = LineDataSet(it.entryList, it.entryList?.get(index)?.data.toString()) + dataSet.setDrawCircles(true) + //线条颜色 + dataSet.color = it.lineColor + //圆点颜色 + dataSet.setCircleColor(it.lineColor) + dataSet.setDrawFilled(true) + dataSet.fillColor = it.lineColor + dataSet.mode = LineDataSet.Mode.CUBIC_BEZIER + lineDataSets.add(dataSet) + } + val lineData = LineData(lineDataSets) + lineData.setDrawValues(false) + //添加自定义Marker + val markerView = LineChartMarkerView(chart.context) + markerView.chartView = chart + markerView.setXAxisDate(xAxisDate) + chart.marker = markerView + //设置X轴坐标 + val xAxis = chart.xAxis + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return xAxisDate[value.toInt()] + } + } + chart.data = lineData + chart.invalidate() + } + // /** // * 竖直柱状图 // * */ diff --git a/app/src/main/java/com/casic/br/view/device/waterheater/GasConsumeActivity.kt b/app/src/main/java/com/casic/br/view/device/waterheater/GasConsumeActivity.kt index 4b66384..af1323d 100644 --- a/app/src/main/java/com/casic/br/view/device/waterheater/GasConsumeActivity.kt +++ b/app/src/main/java/com/casic/br/view/device/waterheater/GasConsumeActivity.kt @@ -4,8 +4,12 @@ import com.alibaba.fastjson.JSONObject import com.casic.br.R import com.casic.br.extensions.createCommand +import com.casic.br.model.LineChartEntryModel +import com.casic.br.utils.ChartViewHelper import com.casic.br.utils.CommandManager +import com.casic.br.utils.LocaleConstant import com.casic.br.utils.TuyaDeviceListener +import com.github.mikephil.charting.data.Entry import com.gyf.immersionbar.ImmersionBar import com.pengxh.kt.lite.base.KotlinBaseActivity import com.pengxh.kt.lite.extensions.convertColor @@ -44,7 +48,7 @@ override fun initData() { calendar = Calendar.getInstance() //默认选中 - dateRadioGroup.check(R.id.dayRadioButton) + dateRadioGroup.check(R.id.monthRadioButton) setLineChartData() setDate( @@ -167,7 +171,26 @@ * 设置折线统计数据 * */ private fun setLineChartData() { + val xAxisLabel: MutableList = ArrayList() + val entryModels: MutableList = ArrayList() + val array = arrayListOf("用气量", "用水量") + for (i in 0 until 2) { + //每个entries都是一条折线 + val entries: ArrayList = ArrayList() + val entryModel = LineChartEntryModel() + for (j in 1..31) { + entryModel.lineColor = LocaleConstant.COLORS[i + 2].convertColor(this) + xAxisLabel.add(j.toString()) + + entries.add( + Entry(j.toFloat(), Random().nextFloat() * 10, array[i]) + ) + } + entryModel.entryList = entries + entryModels.add(entryModel) + } + ChartViewHelper.setLineChartData(dataLineChart, xAxisLabel, entryModels) } override fun onDestroy() { diff --git a/app/src/main/java/com/casic/br/widgets/LineChartMarkerView.kt b/app/src/main/java/com/casic/br/widgets/LineChartMarkerView.kt new file mode 100644 index 0000000..5b36468 --- /dev/null +++ b/app/src/main/java/com/casic/br/widgets/LineChartMarkerView.kt @@ -0,0 +1,44 @@ +package com.casic.br.widgets + +import android.content.Context +import android.widget.TextView +import com.casic.br.R +import com.github.mikephil.charting.components.MarkerView +import com.github.mikephil.charting.data.Entry +import com.github.mikephil.charting.highlight.Highlight +import com.github.mikephil.charting.utils.MPPointF +import java.text.DecimalFormat +import java.util.* + +class LineChartMarkerView(context: Context?) : + MarkerView(context, R.layout.popu_line_chart_marker) { + + private val decimalFormat = DecimalFormat("##0.0") + private val dayView: TextView = findViewById(R.id.dayView) + private val dataView: TextView = findViewById(R.id.dataView) + private var xAxisDate: MutableList = ArrayList() + + fun setXAxisDate(date: MutableList) { + this.xAxisDate = date + } + + //每次重绘，会调用此方法刷新数据 + override fun refreshContent(e: Entry, highlight: Highlight) { + super.refreshContent(e, highlight) + val data = e.data as String + try { + dataView.text = + String.format(data + ":" + decimalFormat.format(e.y.toString().toDouble())) + val date = xAxisDate[(e.x).toInt()] + val split = date.split("/") + dayView.text = String.format(Locale.CHINA, "${split[0]}月${split[1]}日") + } catch (e: Exception) { + e.printStackTrace() + } + super.refreshContent(e, highlight) + } + + override fun getOffset(): MPPointF { + return MPPointF((-(width shr 1)).toFloat(), (-height).toFloat()) + } +} \ No newline at end of file diff --git a/app/src/main/res/drawable/bg_stroke_layout_blue.xml b/app/src/main/res/drawable/bg_stroke_layout_blue.xml new file mode 100644 index 0000000..26ddc25 --- /dev/null +++ b/app/src/main/res/drawable/bg_stroke_layout_blue.xml @@ -0,0 +1,11 @@ + + + + + + + + \ No newline at end of file diff --git a/app/src/main/res/drawable/bg_text_tag_blue.xml b/app/src/main/res/drawable/bg_text_tag_blue.xml new file mode 100644 index 0000000..6b497b0 --- /dev/null +++ b/app/src/main/res/drawable/bg_text_tag_blue.xml @@ -0,0 +1,9 @@ + + + + + + \ No newline at end of file diff --git a/app/src/main/res/layout/activity_gas_consume.xml b/app/src/main/res/layout/activity_gas_consume.xml index 47824ce..9f0a836 100644 --- a/app/src/main/res/layout/activity_gas_consume.xml +++ b/app/src/main/res/layout/activity_gas_consume.xml @@ -45,6 +45,7 @@ diff --git a/app/src/main/java/com/casic/br/extensions/LineChart.kt b/app/src/main/java/com/casic/br/extensions/LineChart.kt new file mode 100644 index 0000000..2a4b100 --- /dev/null +++ b/app/src/main/java/com/casic/br/extensions/LineChart.kt @@ -0,0 +1,49 @@ +package com.casic.br.extensions + +import android.content.Context +import com.casic.br.R +import com.github.mikephil.charting.animation.Easing +import com.github.mikephil.charting.charts.Chart +import com.github.mikephil.charting.charts.LineChart +import com.github.mikephil.charting.components.Legend +import com.github.mikephil.charting.components.XAxis +import com.github.mikephil.charting.components.YAxis +import com.pengxh.kt.lite.extensions.convertColor +import com.pengxh.kt.lite.extensions.sp2px + +fun LineChart.init(context: Context) { + this.setNoDataText("无数据，无法渲染...") + this.setNoDataTextColor(R.color.red) + this.getPaint(Chart.PAINT_INFO).textSize = 14f.sp2px(context).toFloat() + this.setDrawGridBackground(false) + this.setDrawBorders(false) + this.animateY(1200, Easing.EaseInOutQuad) + //设置样式 + val rightAxis: YAxis = this.axisRight + //设置图表右边的y轴禁用 + rightAxis.isEnabled = false + val leftAxis: YAxis = this.axisLeft + leftAxis.axisMinimum = 0f + this.isScaleXEnabled = true //X轴可缩放 + this.isScaleYEnabled = false //Y轴不可缩放 + //设置x轴 + val xAxis: XAxis = this.xAxis + xAxis.textColor = R.color.lib_text_color.convertColor(context) + xAxis.textSize = 10f + xAxis.setLabelCount(7, true) + xAxis.setDrawLabels(true) //绘制标签 指x轴上的对应数值 + xAxis.setDrawAxisLine(true) //是否绘制轴线 + xAxis.setDrawGridLines(false) //设置x轴上每个点对应的线 + xAxis.granularity = 1f //禁止放大后x轴标签重绘 + xAxis.position = XAxis.XAxisPosition.BOTTOM + this.extraBottomOffset = 5f //解决X轴显示不完全问题 + //去掉描述 + this.description.isEnabled = false + //设置图例 + val legend = this.legend + legend.orientation = Legend.LegendOrientation.HORIZONTAL + legend.verticalAlignment = Legend.LegendVerticalAlignment.BOTTOM + legend.horizontalAlignment = Legend.LegendHorizontalAlignment.CENTER + //图例是否自动换行 + legend.isWordWrapEnabled = true +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/br/model/LineChartEntryModel.java b/app/src/main/java/com/casic/br/model/LineChartEntryModel.java new file mode 100644 index 0000000..bc1da42 --- /dev/null +++ b/app/src/main/java/com/casic/br/model/LineChartEntryModel.java @@ -0,0 +1,29 @@ +package com.casic.br.model; + +import com.github.mikephil.charting.data.Entry; + +import java.util.List; + +public class LineChartEntryModel { + //折线数据 + private List entryList; + + //折线颜色 + private Integer lineColor; + + public List getEntryList() { + return entryList; + } + + public void setEntryList(List entryList) { + this.entryList = entryList; + } + + public Integer getLineColor() { + return lineColor; + } + + public void setLineColor(Integer lineColor) { + this.lineColor = lineColor; + } +} \ No newline at end of file diff --git a/app/src/main/java/com/casic/br/utils/ChartViewHelper.kt b/app/src/main/java/com/casic/br/utils/ChartViewHelper.kt index 3195326..3f5f781 100644 --- a/app/src/main/java/com/casic/br/utils/ChartViewHelper.kt +++ b/app/src/main/java/com/casic/br/utils/ChartViewHelper.kt @@ -2,11 +2,13 @@ import com.casic.br.R import com.casic.br.extensions.init +import com.casic.br.model.LineChartEntryModel +import com.casic.br.widgets.LineChartMarkerView +import com.github.mikephil.charting.charts.LineChart import com.github.mikephil.charting.charts.PieChart -import com.github.mikephil.charting.data.PieData -import com.github.mikephil.charting.data.PieDataSet -import com.github.mikephil.charting.data.PieEntry +import com.github.mikephil.charting.data.* import com.github.mikephil.charting.formatter.ValueFormatter +import com.github.mikephil.charting.interfaces.datasets.ILineDataSet import com.pengxh.kt.lite.extensions.convertColor import java.text.DecimalFormat @@ -18,101 +20,101 @@ * @email 290677893@qq.com */ object ChartViewHelper { -// /** -// * 单条折线图 -// * */ -// fun setSingleLineChartData( -// chart: LineChart, xAxisDate: MutableList, entryModel: LineChartEntryModel -// ) { -// //每次加载数据都初始化折线图 -// chart.init(chart.context) -// if (entryModel.entryList.isEmpty()) { -// return -// } -// //绑定数据 -// val lineDataSets: MutableList = ArrayList() -// //设置数据 -// val dataSet = LineDataSet(entryModel.entryList, entryModel.entryList[0].data.toString()) -// dataSet.setDrawCircles(true) -// //线条颜色 -// dataSet.color = entryModel.lineColor -// //圆点颜色 -// dataSet.setCircleColor(entryModel.lineColor) -// dataSet.setDrawFilled(true) -// dataSet.fillColor = entryModel.lineColor -// dataSet.mode = LineDataSet.Mode.CUBIC_BEZIER -// lineDataSets.add(dataSet) -// -// val lineData = LineData(lineDataSets) -// lineData.setDrawValues(false) -// //添加自定义Marker -// val markerView = LineChartMarkerView(chart.context) -// markerView.chartView = chart -// markerView.setXAxisDate(xAxisDate) -// chart.marker = markerView -// //设置X轴坐标 -// val xAxis = chart.xAxis -// if (xAxisDate.size == 1) { -// xAxis.valueFormatter = object : ValueFormatter() { -// override fun getFormattedValue(value: Float): String { -// return xAxisDate[0] -// } -// } -// } else { -// xAxis.valueFormatter = object : ValueFormatter() { -// override fun getFormattedValue(value: Float): String { -// return xAxisDate[value.toInt()] -// } -// } -// } -// chart.data = lineData -// chart.invalidate() -// } -// -// /** -// * 多条折线图 -// * */ -// fun setLineChartData( -// chart: LineChart, xAxisDate: MutableList, entryModels: List -// ) { -// //每次加载数据都初始化折线图 -// chart.init(chart.context) -// if (entryModels[0].entryList.isEmpty()) { -// return -// } -// //绑定数据 -// val lineDataSets: MutableList = ArrayList() -// entryModels.forEachIndexed { index, it -> -// //设置数据 -// val dataSet = LineDataSet(it.entryList, it.entryList?.get(index)?.data.toString()) -// dataSet.setDrawCircles(true) -// //线条颜色 -// dataSet.color = it.lineColor -// //圆点颜色 -// dataSet.setCircleColor(it.lineColor) -// dataSet.setDrawFilled(true) -// dataSet.fillColor = it.lineColor -// dataSet.mode = LineDataSet.Mode.CUBIC_BEZIER -// lineDataSets.add(dataSet) -// } -// val lineData = LineData(lineDataSets) -// lineData.setDrawValues(false) -// //添加自定义Marker -// val markerView = LineChartMarkerView(chart.context) -// markerView.chartView = chart -// markerView.setXAxisDate(xAxisDate) -// chart.marker = markerView -// //设置X轴坐标 -// val xAxis = chart.xAxis -// xAxis.valueFormatter = object : ValueFormatter() { -// override fun getFormattedValue(value: Float): String { -// return xAxisDate[value.toInt()] -// } -// } -// chart.data = lineData -// chart.invalidate() -// } -// + /** + * 单条折线图 + * */ + fun setSingleLineChartData( + chart: LineChart, xAxisDate: MutableList, entryModel: LineChartEntryModel + ) { + //每次加载数据都初始化折线图 + chart.init(chart.context) + if (entryModel.entryList.isEmpty()) { + return + } + //绑定数据 + val lineDataSets: MutableList = ArrayList() + //设置数据 + val dataSet = LineDataSet(entryModel.entryList, entryModel.entryList[0].data.toString()) + dataSet.setDrawCircles(true) + //线条颜色 + dataSet.color = entryModel.lineColor + //圆点颜色 + dataSet.setCircleColor(entryModel.lineColor) + dataSet.setDrawFilled(true) + dataSet.fillColor = entryModel.lineColor + dataSet.mode = LineDataSet.Mode.CUBIC_BEZIER + lineDataSets.add(dataSet) + + val lineData = LineData(lineDataSets) + lineData.setDrawValues(false) + //添加自定义Marker + val markerView = LineChartMarkerView(chart.context) + markerView.chartView = chart + markerView.setXAxisDate(xAxisDate) + chart.marker = markerView + //设置X轴坐标 + val xAxis = chart.xAxis + if (xAxisDate.size == 1) { + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return xAxisDate[0] + } + } + } else { + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return xAxisDate[value.toInt()] + } + } + } + chart.data = lineData + chart.invalidate() + } + + /** + * 多条折线图 + * */ + fun setLineChartData( + chart: LineChart, xAxisDate: MutableList, entryModels: List + ) { + //每次加载数据都初始化折线图 + chart.init(chart.context) + if (entryModels[0].entryList.isEmpty()) { + return + } + //绑定数据 + val lineDataSets: MutableList = ArrayList() + entryModels.forEachIndexed { index, it -> + //设置数据 + val dataSet = LineDataSet(it.entryList, it.entryList?.get(index)?.data.toString()) + dataSet.setDrawCircles(true) + //线条颜色 + dataSet.color = it.lineColor + //圆点颜色 + dataSet.setCircleColor(it.lineColor) + dataSet.setDrawFilled(true) + dataSet.fillColor = it.lineColor + dataSet.mode = LineDataSet.Mode.CUBIC_BEZIER + lineDataSets.add(dataSet) + } + val lineData = LineData(lineDataSets) + lineData.setDrawValues(false) + //添加自定义Marker + val markerView = LineChartMarkerView(chart.context) + markerView.chartView = chart + markerView.setXAxisDate(xAxisDate) + chart.marker = markerView + //设置X轴坐标 + val xAxis = chart.xAxis + xAxis.valueFormatter = object : ValueFormatter() { + override fun getFormattedValue(value: Float): String { + return xAxisDate[value.toInt()] + } + } + chart.data = lineData + chart.invalidate() + } + // /** // * 竖直柱状图 // * */ diff --git a/app/src/main/java/com/casic/br/view/device/waterheater/GasConsumeActivity.kt b/app/src/main/java/com/casic/br/view/device/waterheater/GasConsumeActivity.kt index 4b66384..af1323d 100644 --- a/app/src/main/java/com/casic/br/view/device/waterheater/GasConsumeActivity.kt +++ b/app/src/main/java/com/casic/br/view/device/waterheater/GasConsumeActivity.kt @@ -4,8 +4,12 @@ import com.alibaba.fastjson.JSONObject import com.casic.br.R import com.casic.br.extensions.createCommand +import com.casic.br.model.LineChartEntryModel +import com.casic.br.utils.ChartViewHelper import com.casic.br.utils.CommandManager +import com.casic.br.utils.LocaleConstant import com.casic.br.utils.TuyaDeviceListener +import com.github.mikephil.charting.data.Entry import com.gyf.immersionbar.ImmersionBar import com.pengxh.kt.lite.base.KotlinBaseActivity import com.pengxh.kt.lite.extensions.convertColor @@ -44,7 +48,7 @@ override fun initData() { calendar = Calendar.getInstance() //默认选中 - dateRadioGroup.check(R.id.dayRadioButton) + dateRadioGroup.check(R.id.monthRadioButton) setLineChartData() setDate( @@ -167,7 +171,26 @@ * 设置折线统计数据 * */ private fun setLineChartData() { + val xAxisLabel: MutableList = ArrayList() + val entryModels: MutableList = ArrayList() + val array = arrayListOf("用气量", "用水量") + for (i in 0 until 2) { + //每个entries都是一条折线 + val entries: ArrayList = ArrayList() + val entryModel = LineChartEntryModel() + for (j in 1..31) { + entryModel.lineColor = LocaleConstant.COLORS[i + 2].convertColor(this) + xAxisLabel.add(j.toString()) + + entries.add( + Entry(j.toFloat(), Random().nextFloat() * 10, array[i]) + ) + } + entryModel.entryList = entries + entryModels.add(entryModel) + } + ChartViewHelper.setLineChartData(dataLineChart, xAxisLabel, entryModels) } override fun onDestroy() { diff --git a/app/src/main/java/com/casic/br/widgets/LineChartMarkerView.kt b/app/src/main/java/com/casic/br/widgets/LineChartMarkerView.kt new file mode 100644 index 0000000..5b36468 --- /dev/null +++ b/app/src/main/java/com/casic/br/widgets/LineChartMarkerView.kt @@ -0,0 +1,44 @@ +package com.casic.br.widgets + +import android.content.Context +import android.widget.TextView +import com.casic.br.R +import com.github.mikephil.charting.components.MarkerView +import com.github.mikephil.charting.data.Entry +import com.github.mikephil.charting.highlight.Highlight +import com.github.mikephil.charting.utils.MPPointF +import java.text.DecimalFormat +import java.util.* + +class LineChartMarkerView(context: Context?) : + MarkerView(context, R.layout.popu_line_chart_marker) { + + private val decimalFormat = DecimalFormat("##0.0") + private val dayView: TextView = findViewById(R.id.dayView) + private val dataView: TextView = findViewById(R.id.dataView) + private var xAxisDate: MutableList = ArrayList() + + fun setXAxisDate(date: MutableList) { + this.xAxisDate = date + } + + //每次重绘，会调用此方法刷新数据 + override fun refreshContent(e: Entry, highlight: Highlight) { + super.refreshContent(e, highlight) + val data = e.data as String + try { + dataView.text = + String.format(data + ":" + decimalFormat.format(e.y.toString().toDouble())) + val date = xAxisDate[(e.x).toInt()] + val split = date.split("/") + dayView.text = String.format(Locale.CHINA, "${split[0]}月${split[1]}日") + } catch (e: Exception) { + e.printStackTrace() + } + super.refreshContent(e, highlight) + } + + override fun getOffset(): MPPointF { + return MPPointF((-(width shr 1)).toFloat(), (-height).toFloat()) + } +} \ No newline at end of file diff --git a/app/src/main/res/drawable/bg_stroke_layout_blue.xml b/app/src/main/res/drawable/bg_stroke_layout_blue.xml new file mode 100644 index 0000000..26ddc25 --- /dev/null +++ b/app/src/main/res/drawable/bg_stroke_layout_blue.xml @@ -0,0 +1,11 @@ + + + + + + + + \ No newline at end of file diff --git a/app/src/main/res/drawable/bg_text_tag_blue.xml b/app/src/main/res/drawable/bg_text_tag_blue.xml new file mode 100644 index 0000000..6b497b0 --- /dev/null +++ b/app/src/main/res/drawable/bg_text_tag_blue.xml @@ -0,0 +1,9 @@ + + + + + + \ No newline at end of file diff --git a/app/src/main/res/layout/activity_gas_consume.xml b/app/src/main/res/layout/activity_gas_consume.xml index 47824ce..9f0a836 100644 --- a/app/src/main/res/layout/activity_gas_consume.xml +++ b/app/src/main/res/layout/activity_gas_consume.xml @@ -45,6 +45,7 @@ diff --git a/app/src/main/res/layout/popu_line_chart_marker.xml b/app/src/main/res/layout/popu_line_chart_marker.xml new file mode 100644 index 0000000..2a45af7 --- /dev/null +++ b/app/src/main/res/layout/popu_line_chart_marker.xml @@ -0,0 +1,32 @@ + + + + + + + \ No newline at end of file