MP 图表 Android 在获取数据快照的实时值后未更新图表
MP Chart Android is not updating Chart after getting realtime value on data snapshot
我正在研究 android MP 组合图表。我正在使用 firebase 将实时数据传递给图表。我成功地完成了获取数据并传递到组合图表中。
但问题是，当 firebase 从其他数据源更新自身时，图表不会根据值（在数据快照中获取）更新自身。
如您所见here。
我看到了很多解决方案，但它们根据需求和图表类型而有所不同。如何解决我的图表问题？会有很大帮助。
Here's is my onDataChange() code. Calling in
onCreate
ref.addValueEventListener(new ValueEventListener() {
@Override
public void onDataChange(DataSnapshot dataSnapshot) {
for (DataSnapshot ds : dataSnapshot.getChildren()) {
//get FLOW RATE
String rate = ds.child("flowRate").getValue(String.class);
//get TIMESTAMP
long timestamp = ds.child("timestamp").getValue(Long.class);
//add, got TIMESTAMP to xAxisData (list)
xAxisData.add(getDatafTimeStamp(timestamp));
//add, got FLOW RATE to flow_rate (list)
flow_rate.add(rate);
combinedChart.notifyDataSetChanged();
combinedChart.invalidate();
}
drawCombinedChart(xAxisData, flow_rate, quantity, followed);
@Override
public void onCancelled(DatabaseError databaseError) {
datafetched = false;
}
});
Here's my drawCombinechart() function, called every time when data updates in firebase
public void drawCombinedChart(List<String> axis, final List<String> rate) {
//set chart's description, grid, shadow when chart is loaded
combinedChart.setDescription("");
combinedChart.setDrawGridBackground(false);
combinedChart.setDrawBarShadow(false);
combinedChart.setNoDataText("Loading.....");
// draw bars behind lines
combinedChart.setDrawOrder(new CombinedChart.DrawOrder[]{
CombinedChart.DrawOrder.BAR, CombinedChart.DrawOrder.LINE, CombinedChart.DrawOrder.LINE
});
Legend l = combinedChart.getLegend();
l.setWordWrapEnabled(true);
// Setting X_Axis of combine chart
XAxis xAxis = combinedChart.getXAxis();
xAxis.setLabelsToSkip(0);
// Setting X_Axis position in bottom of combine chart
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM); // to set xAxis in Bottom
//setting X_Axis only on right side
combinedChart.getAxisRight().setDrawLabels(true);
combinedChart.getAxisLeft().setDrawZeroLine(false);
combinedChart.getAxisRight().setAxisMinValue(0);
// Setting Y_Axis to left side of combine chart
YAxis y = combinedChart.getAxisLeft();
y.setAxisMinValue(0);
y.setGranularity(1f);
y.setGranularityEnabled(true);
y.setAxisLineColor(Color.BLACK);
y.setTextColor(Color.BLACK);
y.setEnabled(true);
y.setAxisLineColor(Color.BLACK);
y.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART);
y.setDrawGridLines(false);
y.setLabelCount(5, true);
y.setDrawZeroLine(false);
y.isForceLabelsEnabled();
y.setDrawLabels(true);
y.setDrawLimitLinesBehindData(true);
y.setDrawGridLines(true);
y.setDrawLimitLinesBehindData(true);
y.setTextColor(Color.RED);
y.setDrawZeroLine(true);
//animate Y_axis to 5 seconds
combinedChart.animateY(0);
// Setting Y_Axis to right side of combine chart
YAxis rightAxis = combinedChart.getAxisRight();
rightAxis.setDrawGridLines(true);
rightAxis.setLabelCount(5, true);
rightAxis.setDrawZeroLine(false);
rightAxis.isForceLabelsEnabled();
rightAxis.setDrawLabels(true);
rightAxis.setDrawLimitLinesBehindData(true);
rightAxis.setDrawGridLines(true);
rightAxis.setDrawLimitLinesBehindData(true);
rightAxis.setTextColor(Color.RED);
rightAxis.setDrawZeroLine(true);
//hide background grid lines of chart
combinedChart.getXAxis().setDrawGridLines(false);
combinedChart.getAxisLeft().setDrawGridLines(false);
combinedChart.getAxisRight().setDrawGridLines(false);
data = new CombinedData(axis);
//when data loaded show msg onto chart
combinedChart.setNoDataText("Data loaded");
//switch pressed
flw_Rate_switch.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
//if FlOW RATE button is on
if (isChecked) {
//change state of other switches
lqd_followed_switch.setChecked(false);
//change color of current switch when ON
flow_rate_switch_txt.setTextColor(Color.parseColor("#536BB5"));
//call function to generate area chart
mlineData = generateLineData(rate);
data.setData(mlineData);
combinedChart.setData(data);
// allow 4 values to be displayed at once on the x-axis, not more
combinedChart.setVisibleXRangeMaximum(4);
combinedChart.moveViewToX(4);
//animate y axis to 2 sec
combinedChart.animateY(0);
combinedChart.invalidate();
}
//if FlOW RATE button is off
else {
//change text color of flow rate switch
flow_rate_switch_txt.setTextColor(Color.BLACK);
//remove all data sets of area chart when switch turned OFF
boolean indicator = data.removeDataSet(lineData1.getDataSetByLabel("Flow Rate", true));
//notify to combine chart that data set has removed
combinedChart.notifyDataSetChanged();
//clear relative chart
combinedChart.clear();
combinedChart.setNoDataText("No data");
combinedChart.invalidate();
combinedChart.animateX(500);
}
}
});
And my generateLineData() function, which is called when switch turned on to generate chart data
private LineData generateLineData(List<String> arr) {
LineData d = new LineData();
ArrayList<Entry> entries = new ArrayList<Entry>();
for (int index = 0; index < arr.size(); index++)
entries.add(new Entry(Float.parseFloat(arr.get(index)), index));
LineDataSet set = new LineDataSet(entries, "Flow Rate");
//set highlight line color
set.setColor(Color.parseColor("#536BB5"));
set.setLineWidth(2.5f);
//set data points color
set.setCircleColor(Color.RED);
//set color to area occupied by chart
set.setFillColor(Color.parseColor("#536BB5"));
set.setCircleRadius(4f);
//draw chart lines in cubic shape
set.setDrawCubic(true);
//set area occupied by chart must be filled
set.setDrawFilled(true);
set.setDrawValues(false);
set.setHighLightColor(Color.MAGENTA);
set.setLabel("Flow rate");
set.setAxisDependency(YAxis.AxisDependency.LEFT);
d.addDataSet(set);
lineData1 = d;
return d;
}
当值更新时，您必须为 mpChart 设置值。
要更新 mpchat，只需隐藏并显示 mpChart。
保持开关状态打开，我实时得到我的图表。
您需要告诉您的图表数据集已更新并且您需要刷新图表，为此您需要添加以下行：
combinedChart.notifyDataSetChanged();
combinedChart.setData(data);
combinedChart.invalidate();
在显示图表方法的开头添加此代码
chart.refreshDrawableState();
我正在研究 android MP 组合图表。我正在使用 firebase 将实时数据传递给图表。我成功地完成了获取数据并传递到组合图表中。
但问题是，当 firebase 从其他数据源更新自身时，图表不会根据值（在数据快照中获取）更新自身。
如您所见here。
我看到了很多解决方案，但它们根据需求和图表类型而有所不同。如何解决我的图表问题？会有很大帮助。
Here's is my onDataChange() code. Calling in onCreate
ref.addValueEventListener(new ValueEventListener() {
@Override
public void onDataChange(DataSnapshot dataSnapshot) {
for (DataSnapshot ds : dataSnapshot.getChildren()) {
//get FLOW RATE
String rate = ds.child("flowRate").getValue(String.class);
//get TIMESTAMP
long timestamp = ds.child("timestamp").getValue(Long.class);
//add, got TIMESTAMP to xAxisData (list)
xAxisData.add(getDatafTimeStamp(timestamp));
//add, got FLOW RATE to flow_rate (list)
flow_rate.add(rate);
combinedChart.notifyDataSetChanged();
combinedChart.invalidate();
}
drawCombinedChart(xAxisData, flow_rate, quantity, followed);
@Override
public void onCancelled(DatabaseError databaseError) {
datafetched = false;
}
});
Here's my drawCombinechart() function, called every time when data updates in firebase
public void drawCombinedChart(List<String> axis, final List<String> rate) {
//set chart's description, grid, shadow when chart is loaded
combinedChart.setDescription("");
combinedChart.setDrawGridBackground(false);
combinedChart.setDrawBarShadow(false);
combinedChart.setNoDataText("Loading.....");
// draw bars behind lines
combinedChart.setDrawOrder(new CombinedChart.DrawOrder[]{
CombinedChart.DrawOrder.BAR, CombinedChart.DrawOrder.LINE, CombinedChart.DrawOrder.LINE
});
Legend l = combinedChart.getLegend();
l.setWordWrapEnabled(true);
// Setting X_Axis of combine chart
XAxis xAxis = combinedChart.getXAxis();
xAxis.setLabelsToSkip(0);
// Setting X_Axis position in bottom of combine chart
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM); // to set xAxis in Bottom
//setting X_Axis only on right side
combinedChart.getAxisRight().setDrawLabels(true);
combinedChart.getAxisLeft().setDrawZeroLine(false);
combinedChart.getAxisRight().setAxisMinValue(0);
// Setting Y_Axis to left side of combine chart
YAxis y = combinedChart.getAxisLeft();
y.setAxisMinValue(0);
y.setGranularity(1f);
y.setGranularityEnabled(true);
y.setAxisLineColor(Color.BLACK);
y.setTextColor(Color.BLACK);
y.setEnabled(true);
y.setAxisLineColor(Color.BLACK);
y.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART);
y.setDrawGridLines(false);
y.setLabelCount(5, true);
y.setDrawZeroLine(false);
y.isForceLabelsEnabled();
y.setDrawLabels(true);
y.setDrawLimitLinesBehindData(true);
y.setDrawGridLines(true);
y.setDrawLimitLinesBehindData(true);
y.setTextColor(Color.RED);
y.setDrawZeroLine(true);
//animate Y_axis to 5 seconds
combinedChart.animateY(0);
// Setting Y_Axis to right side of combine chart
YAxis rightAxis = combinedChart.getAxisRight();
rightAxis.setDrawGridLines(true);
rightAxis.setLabelCount(5, true);
rightAxis.setDrawZeroLine(false);
rightAxis.isForceLabelsEnabled();
rightAxis.setDrawLabels(true);
rightAxis.setDrawLimitLinesBehindData(true);
rightAxis.setDrawGridLines(true);
rightAxis.setDrawLimitLinesBehindData(true);
rightAxis.setTextColor(Color.RED);
rightAxis.setDrawZeroLine(true);
//hide background grid lines of chart
combinedChart.getXAxis().setDrawGridLines(false);
combinedChart.getAxisLeft().setDrawGridLines(false);
combinedChart.getAxisRight().setDrawGridLines(false);
data = new CombinedData(axis);
//when data loaded show msg onto chart
combinedChart.setNoDataText("Data loaded");
//switch pressed
flw_Rate_switch.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
//if FlOW RATE button is on
if (isChecked) {
//change state of other switches
lqd_followed_switch.setChecked(false);
//change color of current switch when ON
flow_rate_switch_txt.setTextColor(Color.parseColor("#536BB5"));
//call function to generate area chart
mlineData = generateLineData(rate);
data.setData(mlineData);
combinedChart.setData(data);
// allow 4 values to be displayed at once on the x-axis, not more
combinedChart.setVisibleXRangeMaximum(4);
combinedChart.moveViewToX(4);
//animate y axis to 2 sec
combinedChart.animateY(0);
combinedChart.invalidate();
}
//if FlOW RATE button is off
else {
//change text color of flow rate switch
flow_rate_switch_txt.setTextColor(Color.BLACK);
//remove all data sets of area chart when switch turned OFF
boolean indicator = data.removeDataSet(lineData1.getDataSetByLabel("Flow Rate", true));
//notify to combine chart that data set has removed
combinedChart.notifyDataSetChanged();
//clear relative chart
combinedChart.clear();
combinedChart.setNoDataText("No data");
combinedChart.invalidate();
combinedChart.animateX(500);
}
}
});
And my generateLineData() function, which is called when switch turned on to generate chart data
private LineData generateLineData(List<String> arr) {
LineData d = new LineData();
ArrayList<Entry> entries = new ArrayList<Entry>();
for (int index = 0; index < arr.size(); index++)
entries.add(new Entry(Float.parseFloat(arr.get(index)), index));
LineDataSet set = new LineDataSet(entries, "Flow Rate");
//set highlight line color
set.setColor(Color.parseColor("#536BB5"));
set.setLineWidth(2.5f);
//set data points color
set.setCircleColor(Color.RED);
//set color to area occupied by chart
set.setFillColor(Color.parseColor("#536BB5"));
set.setCircleRadius(4f);
//draw chart lines in cubic shape
set.setDrawCubic(true);
//set area occupied by chart must be filled
set.setDrawFilled(true);
set.setDrawValues(false);
set.setHighLightColor(Color.MAGENTA);
set.setLabel("Flow rate");
set.setAxisDependency(YAxis.AxisDependency.LEFT);
d.addDataSet(set);
lineData1 = d;
return d;
}
当值更新时，您必须为 mpChart 设置值。 要更新 mpchat，只需隐藏并显示 mpChart。
保持开关状态打开，我实时得到我的图表。
您需要告诉您的图表数据集已更新并且您需要刷新图表，为此您需要添加以下行：
combinedChart.notifyDataSetChanged();
combinedChart.setData(data);
combinedChart.invalidate();
在显示图表方法的开头添加此代码
chart.refreshDrawableState();