android - 单击 cardview 时从 firebase firestore 获取数据并使用 highcharts 绘制直方图 - android

Question

我有一个 Activity ，其中有许多卡片 View ，点击这些卡片 View 时应该从 firebase firestore 获取数据并使用 android 中的 highcharts 以直方图格式绘制数据。在每个卡片 View 点击事件中，该卡片 View 的 d 被传递在 firestore 查询中并检索相关数据。但在我的例子中，卡片 View 仅在第二次单击时起作用，并且当单击不同的卡片 View 时，它会保留上一个查询的值，并且只有在第二次单击时才会显示正确的值数据。

下面是我的具有卡片 View 的适配器 View 的代码。

   DocumentReference docRef = rootRef.collection("Users").document(tId).collection("Subjects")
                .document(subId).collection("Marks").document(testList.get(position).getMarksID());

           holder.show_graph.setOnClickListener(v -> {

               docRef.get().addOnSuccessListener(documentSnapshot -> {
                   mMarks = new HashSet<>();
                   if (documentSnapshot != null && documentSnapshot.exists()) {
                       Map<String, Object> hm = documentSnapshot.getData();
                       Set<String> a = hm.keySet();
                       for (String b : a) {
                           try {
                               holder.marks_obtained.setText((String)documentSnapshot.get(email));

                               if(!b.equals("Max_marks")){
                                   Log.e( "onComplete: ", documentSnapshot.get(b+".com") + "  " +documentSnapshot.getId() );
                                   mMarks.add(Float.parseFloat((String)documentSnapshot.get(b+".com")));
                               }
                           } catch (Exception e) {
                               e.printStackTrace();
                           }
                       }
                   }
               });

            v = LayoutInflater.from(context).inflate(R.layout.graph_plot,null);
            final View alertLayout = v;

            try{
                //HICharts
                HIChartView chartView =  alertLayout.findViewById(R.id.hc);
                chartView.plugins = new ArrayList<>(Arrays.asList("histogram-bellcurve"));

                HIOptions options = new HIOptions();

                HIChart chart = new HIChart();
                chart.setType("variwide");
                options.setChart(chart);

                HITitle title = new HITitle();
                title.setText("Score Division");
                options.setTitle(title);

                HIXAxis xaxis1 = new HIXAxis();
                HITitle ht = new HITitle();
                ht.setText("Count");
                xaxis1.setTitle(ht);

                HIXAxis xaxis2 = new HIXAxis();
                xaxis2.setTitle(new HITitle());
                xaxis2.setOpposite(true);

                options.setXAxis(new ArrayList<>(Arrays.asList(xaxis1, xaxis2)));

                HIYAxis yaxis1 = new HIYAxis();
                HITitle ht2 = new HITitle();
                ht2.setText("Marks");
                yaxis1.setTitle(ht2);

                HIYAxis yaxis2 = new HIYAxis();
                yaxis2.setTitle(new HITitle());
                yaxis2.setOpposite(true);

                options.setYAxis(new ArrayList<>(Arrays.asList(yaxis1, yaxis2)));

                HILegend legend = new HILegend();
                legend.setEnabled(true);
                options.setLegend(legend);

                HIHistogram series1 = new HIHistogram();
                series1.setType("histogram");
                series1.setName("Histogram");
                series1.setXAxis(1);
                series1.setYAxis(1);
                series1.setBaseSeries("s1");
                series1.setZIndex(-1);

                HIScatter series2 = new HIScatter();
                series2.setType("scatter");
                series2.setName("Data");

                Number[] series2_data = new Number[mMarks.size()];

                int i = 0;
                for(float m : mMarks){
                    series2_data[i] = m;
                    i++;
                }

                series2.setId("s1");
                series2.setData(new ArrayList<>(Arrays.asList(series2_data)));
                series2.setMarker(new HIMarker());
                series2.getMarker().setRadius(2.5);

                options.setSeries(new ArrayList<>(Arrays.asList(series1, series2)));

                options.setExporting(new HIExporting());
                options.getExporting().setEnabled(false);

                chartView.setOptions(options);

                AlertDialog.Builder alertBox = new AlertDialog.Builder(v.getRootView().getContext());
                alertBox.setTitle("Graph");

                alertBox.setView(alertLayout);
                alertBox.setCancelable(false);

                alertBox.setPositiveButton("Done", (dialog, which) -> dialog.dismiss());

                AlertDialog dialog = alertBox.create();
                dialog.show();
            }
            catch (NullPointerException e){
                Log.e("",e.getLocalizedMessage());
            }
            finally {
                if(mMarks != null){
                    mMarks.clear();
                }
            }
        });
    }

Answer 1

正如@daniel_s 提到的，这不是 highcharts 的问题。这也不是 firebase 的问题。它以您放置代码的方式存在。

现在我不是谈论 firebase 的合适人选，但让我们理解这一点。Firebase 工作在异步机制上，Firebase 的所有方法都是异步类型的。因此，当您单击 Cardview 时，firebase 方法和 highchart 方法会同时运行，而不是一个接一个地运行。

要按照您的方式进行这项工作，您应该这样做:

holder.show_graph.setOnClickListener(v -> {

               docRef.get().addOnSuccessListener(documentSnapshot -> {
                   mMarks = new HashSet<>();
                   if (documentSnapshot != null && documentSnapshot.exists()) {
                       Map<String, Object> hm = documentSnapshot.getData();
                       Set<String> a = hm.keySet();
                       for (String b : a) {
                           try {
                               holder.marks_obtained.setText((String)documentSnapshot.get(email));

                               if(!b.equals("Max_marks")){
                                   Log.e( "onComplete: ", documentSnapshot.get(b+".com") + "  " +documentSnapshot.getId() );
                                   mMarks.add(Float.parseFloat((String)documentSnapshot.get(b+".com")));
                               }
                           } catch (Exception e) {
                               e.printStackTrace();
                           }
                       }
            // All of your highcharts code here.....
            v = LayoutInflater.from(context).inflate(R.layout.graph_plot,null);
            final View alertLayout = v;

            try{
                //HICharts
                HIChartView chartView =  alertLayout.findViewById(R.id.hc);
                chartView.plugins = new ArrayList<>(Arrays.asList("histogram-bellcurve"));

                HIOptions options = new HIOptions();

                HIChart chart = new HIChart();
                chart.setType("variwide");
                options.setChart(chart);

                HITitle title = new HITitle();
                title.setText("Score Division");
                options.setTitle(title);

                HIXAxis xaxis1 = new HIXAxis();
                HITitle ht = new HITitle();
                ht.setText("Count");
                xaxis1.setTitle(ht);

                HIXAxis xaxis2 = new HIXAxis();
                xaxis2.setTitle(new HITitle());
                xaxis2.setOpposite(true);

                options.setXAxis(new ArrayList<>(Arrays.asList(xaxis1, xaxis2)));

                HIYAxis yaxis1 = new HIYAxis();
                HITitle ht2 = new HITitle();
                ht2.setText("Marks");
                yaxis1.setTitle(ht2);

                HIYAxis yaxis2 = new HIYAxis();
                yaxis2.setTitle(new HITitle());
                yaxis2.setOpposite(true);

                options.setYAxis(new ArrayList<>(Arrays.asList(yaxis1, yaxis2)));

                HILegend legend = new HILegend();
                legend.setEnabled(true);
                options.setLegend(legend);

                HIHistogram series1 = new HIHistogram();
                series1.setType("histogram");
                series1.setName("Histogram");
                series1.setXAxis(1);
                series1.setYAxis(1);
                series1.setBaseSeries("s1");
                series1.setZIndex(-1);

                HIScatter series2 = new HIScatter();
                series2.setType("scatter");
                series2.setName("Data");

                Number[] series2_data = new Number[mMarks.size()];

                int i = 0;
                for(float m : mMarks){
                    series2_data[i] = m;
                    i++;
                }

                series2.setId("s1");
                series2.setData(new ArrayList<>(Arrays.asList(series2_data)));
                series2.setMarker(new HIMarker());
                series2.getMarker().setRadius(2.5);

                options.setSeries(new ArrayList<>(Arrays.asList(series1, series2)));

                options.setExporting(new HIExporting());
                options.getExporting().setEnabled(false);

                chartView.setOptions(options);

                AlertDialog.Builder alertBox = new AlertDialog.Builder(v.getRootView().getContext());
                alertBox.setTitle("Graph");

                alertBox.setView(alertLayout);
                alertBox.setCancelable(false);

                alertBox.setPositiveButton("Done", (dialog, which) -> dialog.dismiss());

                AlertDialog dialog = alertBox.create();
                dialog.show();
            }
            catch (NullPointerException e){
                Log.e("",e.getLocalizedMessage());
            }
            finally {
                if(mMarks != null){
                    mMarks.clear();
                }
            }
                   }
               });

希望我说清楚了。如果有效，请点击勾号接受我的回答:)