ucharts图表绘制数据更新失败、时间戳传参失败、坐标轴设置整数等问题

自从用了ucharts,我感觉我遇到的问题可以写一本书…
拿效果图说事:
在这里插入图片描述

1.前后台应用切换,部分数据恢复初始状态,部分是操作后的数据

解决办法:请求数据的方法,必须放在mounted()中,这样数据是不会随你切换后台到当前页面数据重新加载的

若数据扔在onshow()中,从当前切入后台,再从后台切入,父组件中在onshow写的初始数据会重新刷新,但子组件比如日期选择器的数值还是当初picker后的老数据,没有恢复初始状态,这样就导致,有的数据是初始值有的是切换前操作的数据

2.图表部署到安卓上可以绘制没问题,在ios上没有数据没表

解决办法:通过VConsole本机调试,我发现在ios上传的时间戳参数是NaN
uniapp中,由于我获取到当前的时间格式是“/”分开的,本想拼接成“-”,再转时间戳,结果在部署到ios的时候,这个时间戳的值为NaN,导致传参失败数据没请求过来图表绘制失败,看到不能对这个数据格式进行处理转时间戳
在这里插入图片描述

3.时间切换请求不同数据时,报错

在这里插入图片描述
问题分析:经过我的不断调试,我发现在我绘制图表的时候,第一次请求数据的时候没问题,往后就报这个类型不对了。
最后发现问题是出在,父组件中我是把请求到的data,name值存到了一个数组中,再传给子组件ucharts的时候,直接把ucharts的配置项series整个赋值了,导致配置项数据项格式不对
在这里插入图片描述
在这里插入图片描述
解决办法:父组件传值给子组件的data,name,必须具体对应配置项的option.series.data,option.series.name,若整个数组直接赋值,会导致其他配置数据不存在,第一次请求数据的时候问题还不大,因为是init初始化,第二次就是走监听,必须一对一赋值,不可直接赋值给seroption.series

配置项的 this.option.series.name = 监听到的数据.name
配置项的 this.option.series.data = 监听到的数据.data

4.绘制折线图中,y轴居然无法设置为整数,只给了一个自定义方法保留两位小数,当我四舍五入保留整数的时候,y轴数值重复

在这里插入图片描述

我现在的需求是,数据都是大于等于0的整数,一般情况都是分5条网格,但是如小于5的时候,我四舍五入显示整数会出现值重复的问题
解决办法:为了实现这样的需求,我只好把获取的y轴数值进行遍历,获取当最大的值为1,2,3,4,大于等于5不同状态,绘制不同条数的网格,这样就不会除不完

//this.opts.y  就是我请求到的Y轴的数据,找出最大的那个数值,就绘制几条网格
//this.splitNumber 就是我定义的网格条数,动态赋值给opts.yAxis.splitNumbe就行(文档中,opts.yAxis.splitNumber	Number	默认5	Y轴网格数量)
this.opts.y.forEach(e => {
	if(num < e){
		num = e
	}
	if(num===4){
		this.splitNumber = 4
	}else if(num===2){
		this.splitNumber = 2
	}else if(num===3){
		this.splitNumber = 3
	}else if(num===1){
		this.splitNumber = 1
	}else{
		this.splitNumber = 5
	}
	
});

5.针对部分name值是固定的,比如评分中,一星,二星,三星,这样的,初始化数据的时候,name可直接固定死

比如:

public_manyiArr: [{
	name: "未评价",
		data: 0
	},{
		name: "一星",
		data: 0
	}, {
		name: "二星",
		data: 0
	}, {
		name: "三星",
		data: 0
	}, {
		name: "四星",
		data: 0
	}, {
		name: "五星",
		data: 0
	}],

在接口方法中,只需遍历,单单修改data的值就行

for(let i =0;i<this.public_manyiArr.length;i++){
	//datas.evaluateStarList[i].percent 请求到的data
	this.public_manyiArr[i].data = datas.evaluateStarList[i].percent
}

不过,切记,在走接口数据的时候,一调用这个请求接口的方法,首先就得初始化一下这个数组,还是原先的数据格式name固定

后面有问题我会继续补充的,希望对你有所帮助!

  • 4
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
要使用 MPAndroidChart 绘制时间曲线图,并可以切换坐标轴的尺度,你可以按照以下步骤进行操作: 1. 添加 MPAndroidChart 依赖 在项目的 build.gradle 文件中添加如下依赖: ``` implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0' ``` 2. 创建 LineChart 对象 在布局文件中添加一个 `LineChart` 控件,并在代码中获取该控件的对象: ```java LineChart chart = findViewById(R.id.chart); ``` 3. 准备数据 为了绘制时间曲线图,我们需要准备一些时间戳数据和相应的值。假设我们有一个名为 `DataPoint` 的类,其中包含时间戳和值两个属性: ```java public class DataPoint { public long timestamp; // 时间戳 public float value; // 值 public DataPoint(long timestamp, float value) { this.timestamp = timestamp; this.value = value; } } ``` 我们可以使用一个 `List<DataPoint>` 对象来存储所有的数据点: ```java List<DataPoint> dataPoints = new ArrayList<>(); ``` 4. 绘制时间曲线图 为了绘制时间曲线图,我们需要将时间戳和值转换为 `Entry` 对象,并将它们添加到 `LineDataSet` 对象中。我们还需要创建一个 `LineData` 对象,并将 `LineDataSet` 对象添加到其中。最后,我们将 `LineData` 对象设置到 `LineChart` 控件中: ```java // 将数据点转换为 Entry 对象 List<Entry> entries = new ArrayList<>(); for (DataPoint dataPoint : dataPoints) { entries.add(new Entry(dataPoint.timestamp, dataPoint.value)); } // 创建 LineDataSet 对象 LineDataSet dataSet = new LineDataSet(entries, "Time Line"); // 设置 LineDataSet 的样式 dataSet.setColor(Color.RED); dataSet.setCircleColor(Color.RED); dataSet.setLineWidth(2f); dataSet.setCircleRadius(4f); dataSet.setDrawValues(false); // 创建 LineData 对象 LineData lineData = new LineData(dataSet); // 设置 LineChart 的样式 chart.setDrawGridBackground(false); chart.getDescription().setEnabled(false); chart.setTouchEnabled(true); chart.setDragEnabled(true); chart.setScaleEnabled(true); chart.setPinchZoom(true); chart.getAxisRight().setEnabled(false); chart.getXAxis().setPosition(XAxis.XAxisPosition.BOTTOM); chart.getXAxis().setValueFormatter(new DateValueFormatter()); // 设置 LineData 对象 chart.setData(lineData); chart.invalidate(); ``` 在这个示例中,我们使用了一个名为 `DateValueFormatter` 的类,用于将时间戳转换为日期或时间。这个类的代码如下: ```java public class DateValueFormatter extends ValueFormatter { private SimpleDateFormat dateFormat = new SimpleDateFormat("MM-dd HH:mm"); @Override public String getAxisLabel(float value, AxisBase axis) { Date date = new Date((long) value); return dateFormat.format(date); } @Override public String getFormattedValue(float value) { Date date = new Date((long) value); return dateFormat.format(date); } } ``` 这个类使用了 `SimpleDateFormat` 类,将时间戳转换为指定格式的字符串。在 `getAxisLabel()` 方法中,我们将时间戳转换为日期和时间,作为 x 坐标轴的标签。在 `getFormattedValue()` 方法中,我们也将时间戳转换为日期和时间,但是这个方法用于在图表上显示数据点的值。 5. 切换坐标轴的尺度 为了切换坐标轴的尺度,我们可以在代码中添加一个 `SeekBar` 控件,用于选择分钟或小时的尺度。在 `SeekBar` 的 `OnSeekBarChangeListener` 中,我们可以根据当前选择的尺度,重新设置 x 坐标轴的标签格式。以下是一个示例代码: ```java SeekBar seekBar = findViewById(R.id.seekBar); seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() { @Override public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) { long range = getMaxTimestamp() - getMinTimestamp(); long step; if (progress == 0) { // 分钟尺度 step = 60 * 1000; chart.getXAxis().setValueFormatter(new MinuteValueFormatter()); } else { // 小时尺度 step = 60 * 60 * 1000; chart.getXAxis().setValueFormatter(new HourValueFormatter()); } chart.setVisibleXRangeMaximum(range / step); chart.moveViewToX(getMinTimestamp()); } @Override public void onStartTrackingTouch(SeekBar seekBar) {} @Override public void onStopTrackingTouch(SeekBar seekBar) {} }); ``` 在这个示例中,我们根据当前选择的尺度,设置一个时间步长,以及相应的坐标轴标签格式。我们还通过 `setVisibleXRangeMaximum()` 方法和 `moveViewToX()` 方法,重新设置了 x 坐标轴的范围和位置,以便让当前显示的数据点适应新的尺度。我们还需要重新设置 x 坐标轴的标签格式,因此我们定义了两个新的 `ValueFormatter` 类,分别用于分钟和小时的尺度。这两个类的代码如下: ```java public class MinuteValueFormatter extends ValueFormatter { private SimpleDateFormat dateFormat = new SimpleDateFormat("mm:ss"); @Override public String getAxisLabel(float value, AxisBase axis) { Date date = new Date((long) value); return dateFormat.format(date); } } public class HourValueFormatter extends ValueFormatter { private SimpleDateFormat dateFormat = new SimpleDateFormat("HH:mm"); @Override public String getAxisLabel(float value, AxisBase axis) { Date date = new Date((long) value); return dateFormat.format(date); } } ``` 这两个类和之前的 `DateValueFormatter` 类非常相似,只是将时间戳转换为了不同的格式。注意,在这个示例中,我们假设数据点的时间戳是按照升序排序的,因此第一个数据点的时间戳是最小的,最后一个数据点的时间戳是最大的。你需要根据自己的数据进行相应的调整。 总之,使用 MPAndroidChart 绘制时间曲线图,并可以切换坐标轴的尺度,需要一些额外的代码和格式化器。但是 MPAndroidChart 提供了丰富的 API,能够轻松地实现这些功能。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

咸鱼起码是条鱼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值