【问题标题】:Fetch data from firebase firestore and plot histogram using highcharts when cardview clicked - android当cardview点击时,从firebase firestore获取数据并使用highcharts绘制直方图 - android
【发布时间】:2018-09-27 15:02:13
【问题描述】:

我有一个活动,其中有许多卡片视图,单击时应从 firebase firestore 获取数据并使用 android 中的 highcharts 以直方图格式绘制数据。在每个卡片视图单击事件中,该卡片视图的 d 被传递在firestore查询中并检索相关数据。但在我的情况下,卡片视图仅在第二次单击时有效,并且当单击不同的卡片视图时,它保留前一个查询的值,并且仅在第二次单击时显示正确数据。

下面是我的带有卡片视图的适配器视图的代码。

   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();
                }
            }
        });
    }

【问题讨论】:

  • 看起来问题与 Highcharts 库没有直接关系,而是与卡片视图的实现有关。
  • 抱歉,我不是 Java 和 Android 方面的专家。我只是说这不是 JS(即 Highcharts)的问题。

标签: android firebase highcharts google-cloud-firestore android-cardview


【解决方案1】:

正如@daniel_s 所提到的,这不是highcharts 的问题。它也不是火力基地的问题。它以您放置代码的方式。

现在我不是谈论 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();
                }
            }
                   }
               });

希望我很清楚。如果它有效,那么请通过单击刻度线来接受我的答案:)

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2016-06-16
    • 2013-12-30
    • 2018-11-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-02-01
    相关资源
    最近更新 更多