-
2022-03-18 17:23:43
鉴于网上有很多图表的一些好的文章,我今天的主要利用git上的一个开源框架CombinedChart来实现下面的效果.
图一和图二是最近在温湿度设备上需要实现的两个图表,需求:利用折线图将最近一天,一周,一个月得数据以图标的形式显示出来,同时若为本周本月需要添加多个折线展示最大和最小数据的一个变化。在这里我们主要用的是git上的一个开源图表框架-CombinedChart。
CombinedChart可以绘制饼图,柱形图,折线图,这次需求重点需要绘制折线图,这里便对CombinedChart如何绘制折线图做一个详细得介绍。首先我们对combinedChart进行初始化这里我们涉及到的属性有:
//创建的CombinedChart表格 lateinit var ccTempertureForm: CombinedChart lateinit var ccHumidityForm: CombinedChart
//不显示描述内容 ccTempertureForm.getDescription().setEnabled(true) //设置描述对象,对描述进行设置属性 var description: Description = Description() //这里可以设置文字,文字颜色,文字类型 description.text = "" //图表默认右下方的描述,参数是String对象 ccTempertureForm.description = description ccTempertureForm.setBackgroundColor(Color.WHITE) //设置图网格背景是否显示,默认是false ccTempertureForm.setDrawGridBackground(false) // ccTempertureForm.setHighlightFullBarEnabled(false) //显示边界,就是最上面的一条线加粗的 ccTempertureForm.setDrawBorders(false) //设置true支持两个指头向X、Y轴的缩放,如果为false,只能支持X或者Y轴的当方向缩放 ccTempertureForm.setPinchZoom(false) //设置是否可以拖拽,true可以左右滑动 ccTempertureForm.setDragEnabled(true) //设置是否可以缩放,false不可以放大缩小 ccTempertureForm.setScaleEnabled(false) //图例说明 val legend: Legend = ccTempertureForm.getLegend() legend.isEnabled = false //不显示图例 底部的什么颜色代表什么的说明
在这里我们初始化完图表数据后,我们需要设置X轴得数据列表,X轴数据属性及数据源
//x轴显示位置 ccHumidityForm.xAxis.position = XAxis.XAxisPosition.BOTTOM //网格显示颜色 ccHumidityForm.xAxis.gridColor = R.color.color_aaf7f7f7 //网格显示虚线 ccHumidityForm.xAxis.enableGridDashedLine(10f, 10f, 20f) //添加x轴显示数据源 ccHumidityForm.xAxis.valueFormatter = IndexAxisValueFormatter(xAxisHum) //getFormattedValue利用回调来设置修改x轴的值及添加其他的属性字符 ccHumidityForm.xAxis.valueFormatter = object : IndexAxisValueFormatter(xAxisHum){ override fun getFormattedValue(value: Float): String { return super.getFormattedValue(value) } } //设置数据限制个数 ccHumidityForm.xAxis.setLabelCount(xAxisHum.size, true) //设置最小值从x开始 ccHumidityForm.xAxis.mAxisMinimum = x //设置最大值至y结束 ccHumidityForm.xAxis.mAxisMaximum = y
//为了显示图中的效果这里显示的y轴是不显示的,这里我们设置属性:isenabled来将y轴的数据及边框网格隐藏 //隐藏Y轴边线及数字 ccTempertureForm.axisLeft.isEnabled = false
到这里我们将x与y轴的数据都设置完毕,现在也到了最重要的一步,设置图表,设置图表是要选好图标的类型,我这里设置的是折线图。
//我们创建折线图对象 val lineData = LineData()
折线图的数据源是通过entry来传入的他本是是一个与map一样由key与value组成:分别指坐标的x,y轴坐标
//设置数据源entry val customCounts: MutableList<Entry> = ArrayList() for (t in 0 until yAxisTem.get(i).size) { //add entry()key作为x value作为y数据 customCounts.add(Entry(t.toFloat(), yAxisTem[i][t].toFloat())) } //将数据源listc传入线性表对象内 val lineDataSet = LineDataSet(customCounts, "high") //axisDependency以什么数据作为数据标定 lineDataSet.axisDependency = YAxis.AxisDependency.LEFT //折线图颜色 lineDataSet.color = jineColorDark //折线图样式 lineDataSet.setMode(LineDataSet.Mode.HORIZONTAL_BEZIER); //设置坐标画圆 lineDataSet.setDrawCircles(true) lineDataSet.setCircleColor(jineColorDark) lineDataSet.lineWidth = 2f lineData.addDataSet(lineDataSet)
在这里因为我们图表上添加了数据得单位,因此我们可以利用ValueFormatter属性来添加数据得单位
利用匿名类来实现lineData.setValueFormatter(object : ValueFormatter(){ override fun getFormattedValue(value: Float): String { //在这里返回的就是可以显示得数值而value得值就是前面传入折现表的值 return value.toString()+"%" } }) //设置是否显示数据点的数值 lineData.setDrawValues(true)
到最后我们需要进行显示数据,及显示数据图表
//绘制图表数据 var data = CombinedData() //设置折线图数据 data.setData(getHumLineHighData()) ccHumidityForm.setData(data) ccHumidityForm.invalidate() //更新数据 ccHumidityForm.setVisibleXRangeMaximum(10f) //设置图表最大可见和最小可见个数。既可以固定可见个数。这样少了也是固定宽度。不会变大。如果大于可见宽度则可以滑动查看 ccHumidityForm.setVisibleXRangeMinimum(2f)
若数据为空我们可以设置一个对图表数据进行删除及CombinedChart.clear
最终实现结果:
当然再删除的同时我们可能也需要设置一下为空现实的文案属性为:setNoDataText()在显示数据的时候我们需要明确好图表最大可见和最小可见个数,本质上来说在设置x轴与y轴得到LabelCount时我们需要注意他的限制个数,但是美观我们需要将setVisibleXRangeMaximum与LabelCount一起设置,这样就会避免所有的数据都集中在坐标而让数据显得不美观
(在开发过程中不仅要注意这个还要注意对于控件设置LabelCount属性时,它有两个参数,第一个为x轴或y轴得显示个数,而第二个参数为时候精确还是模糊显示,在设置时若labelCount参数小于setVisibleXRangeMaximum设置得值,一定要将其设置成精确显示而大于的需要设置成模糊显示,这样才能让控件显示不错位)
总结:在做图表的过程中,遇到了很多问题,比如在一张图中需要设置多个折线图,本以为传入两个list就能解决最后发现list是由linedataset来设置的而linedateset是放入linedata进行存放的,存放后才可以进行显示,因此问题解决方法是创建两个lineDataSet 全都存入linedata,当然也需要注意
在存入数据的过程中不能之创建一个list,他们的地址相同,若在修改下一个list内的数据上一个存入的linedataset的list数据也会改变,因此务必创建linedataset时也要创建一个新的list存放数据源。更多相关内容 -
详解Android图表 MPAndroidChart折线图
2020-08-31 23:07:39本篇文章主要介绍了Android图表 MPAndroidChart折线图,MPAndroidChart的功能很强大,非常具有实用价值,需要的朋友可以参考下。 -
echarts 图表 折线图
2019-07-21 09:40:06echarts 图表 折线图 -
High-speedChartingControl--MFC绘制图表折线图、饼图、柱形图控件.doc
2021-10-06 23:46:44High-speedChartingControl--MFC绘制图表折线图、饼图、柱形图控件.doc -
Axure数据图表元件(柱图、饼图、雷达图、折线图、面积图)
2022-06-28 16:21:11Axure数据图表元件(柱图、饼图、雷达图、折线图、面积图)Axure数据图表元件Axure数据图表元件Axure数据图表元件 Axure数据图表元件(柱图、饼图、雷达图、折线图、面积图)Axure数据图表元件Axure数据图表元件... -
Axure 常用的数据图表组件库(柱形图+折线图+饼图+雷达图+仪表盘+地图图表+其他图表)
2022-05-10 09:41:08Axure 常用数据图表组件库 -
Excel折线图面积图模板-漂亮折线柱形图Excel图表
2020-11-24 20:11:39Excel折线图面积图模板-漂亮折线柱形图Excel图表 -
多指标分析折线图PPT图表素材.rar
2019-07-16 11:15:56多指标分析折线图PPT图表素材下载,本素材通过蜘蛛网结构,以折线的方式,分析了6种指标,是综合分析图表中常用素材; 关键词:蜘蛛网,雷达,多指标,折线图,幻灯片图表素材,PPTX格式; -
EXCEL报表折线图-20-折线图制作花型图表.xlsx
2022-05-01 18:53:02EXCEL报表折线图-20-折线图制作花型图表.xlsx -
echarts图表折线图点击纵向区域获取所有点的数据
2018-09-07 17:06:58echarts图表点击事件:折线图点击纵向区域获取所有点的数据,已经能正式使用,可以下载看看,做参考。 -
Android HelloChart开源库图表之折线图的实例代码
2020-08-27 12:06:21主要介绍了Android HelloChart开源库图表之折线图的实例代码,具有很好的参考价值,希望对大家有所帮助,一起跟随小编过来看看吧 -
柱状图、折线图、饼状图 等图表插件Highcharts
2019-04-19 14:47:53柱状图、折线图、饼状图 等图表插件, 主要采用两个js,jquery-1.5.2.min 和 highcharts 在theme中包含四种js是四种颜色样式,defaultSeriesType:为图表类型属性,主要包含8种,分别为 line折线图, spline曲线图,... -
Android MPAndroidChart开源库图表之折线图的实例代码
2020-08-27 12:36:59主要介绍了Android MPAndroidChart开源库图表之折线图的实例代码,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 -
Angular2使用SVG自定义图表(条形图、折线图)组件示例
2020-10-17 00:33:59主要介绍了Angular2使用SVG自定义图表(条形图、折线图)组件,涉及Angular结合svg进行图表绘制的相关操作技巧,需要的朋友可以参考下 -
箭头流程折线图PPT图表模板下载.rar
2019-07-16 11:25:03关键词:箭头流程折线图,折线图,箭头PPT模板,PPT流程图; -
立体折线图PPT图表(点构成).rar
2019-07-16 09:09:10这是一张立体折线图PPT图表...图表左面做了一个渐变的立体色块,能直观的看到数值的浮动,右面立体色块描述内容情况,本图表可以在PowerPoint中作为折线图使用。 关键词:折线图PPT图表,立体幻灯片图表,.PPTX格式; -
网页添加统计图表折线图、扇形图(全,静动态,含4个插件)-gvchart统计图表
2020-03-13 11:56:58统计图表在网站也好,微信也好都很实用,能直观表示出数据,利于分析和修改。 第一步:引入gvchart文件; 第二步:数据。不管静态还是动态,格式一样就完事; 第三步:生成统计图表。 -
echarts实现折线图的拖拽效果
2020-10-15 20:40:51主要为大家详细介绍了echarts实现折线图的拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 -
手机端使用echarts图表,选项卡切换数据图表,圆环图,柱状图,折线图
2020-12-19 10:57:24手机端使用echarts选项卡切换数据图表,圆环图,柱状图,折线图 -
Excel折线图面积图模板-折线图制作花型图表
2020-11-24 20:11:25Excel折线图面积图模板-折线图制作花型图表 -
Excel折线图面积图模板-通用图表模板-月份对比折线图Excel图表
2020-11-24 20:11:51Excel折线图面积图模板-通用图表模板-月份对比折线图Excel图表 -
饼形图 折线图ppt商务数据图表.rar
2019-09-07 15:38:08类似标靶圈圈背景,创意饼形图,扇形图表,圈点线折线图,酷黑黄红经典配送商务数据ppt图表模板,共3套。 -
精美的PPT折线图图表素材.rar
2019-07-15 15:56:12精美的PPT折线图图表素材下载,关键词:复式PPT折线统计图,幻灯片图表素材,PPTX格式; -
带箭头的四色折线图PPT图表.rar
2019-07-16 13:09:29这是一张带箭头的四色折线图PPT图表,第一PPT模板网提供幻灯片图表免费下载。 幻灯片图标横向分了8列,纵向分了10列,设计了四条向上趋势的带箭头的折线,右边文本框标注文字内容;PPT图表适合制作PowerPoint的折线... -
Excel折线图面积图模板-不同颜色的分段折线图Excel图表Excel模板-
2020-11-24 20:10:28Excel折线图面积图模板-不同颜色的分段折线图Excel图表Excel模板- -
精美的柱状图折线图组合PPT图表模板.rar
2019-07-16 13:01:52精美的柱状图折线图组合PPT图表模板下载,关键词:PPT柱状图,幻灯片折线图,PowerPoint图表模板下载,.PPTX格式; -
年月日产量折线图 特效
2019-11-08 22:53:53年月日产量折线图 年月日产量折线图 年月日产量折线图 年月日产量折线图 年月日产量折线图 年月日产量折线图 -
echart各种酷炫图表,柱状图,折线图,仪表盘,雷达图.zip
2021-12-12 15:30:19echart 各种酷炫图表,柱状图,折线图,仪表盘,雷达图