GWT图表：有时并非所有图表都显示

Question

我有4个图表（1个PieChart，1个LineChart和2个ScatterChart）需要立即加载。 下面是我的代码的样子。 我基本上遵循这里的内容 。 我的问题是，有时候所有图表都显示出来，但是有时候，只有一部分显示，其余的只是显示空白。 我当时在想，也许是因为需要很长的加载时间才能检索要在图表上显示的数据。 某处可能存在一些比赛条件，我不知道该如何解决。 任何帮助/建议将不胜感激。

    public interface MyView extends View, HasUiHandlers<ReportsHandlers>  {
        FlowPanel getPageChartWrap();
        FlowPanel getLikeScatterChartProductWrap();

        DateTimePicker getStartDate();
        DateTimePicker getEndDate();
        ListBox getDisplayType();
        ListBox getProductList();
    }

    ...

    private void initializeCharts() {
        getProducts();

        ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
        chartLoader.loadApi(new Runnable() {

            @Override
            public void run() {

                audiencePieChart = new PieChart();
                audienceLineChart = new LineChart();
                getView().getPageChartWrap().add(audiencePieChart);
                getView().getPageChartWrap().add(audienceLineChart);
                drawAudienceCharts();


                likeScatterChart = new ScatterChart();
                getView().getPageChartWrap().add(likeScatterChart);
                drawLikeCharts();

                likeScatterChartProduct = new ScatterChart();
                getView().getLikeScatterChartProductWrap().add(likeScatterChartProduct);
                drawLikeChartsForProduct();
            }
        });
    }

    private void drawAudienceCharts() {
         AudienceChartData data = getData();
         drawAudienceLineChart(data, PeriodType.Monthly)
         drawAudiencePieChart();
    }

    private void drawAudienceLineChart(AudienceChartData data, final PeriodType periodType) {

        int[][] values;     
        if (periodType == PeriodType.MONTHLY) {
            values = new int[][] { data.getMonthlyVisitors()};
        } 

        // Prepare the data
        DataTable dataTable = DataTable.create();
        dataTable.addColumn(ColumnType.STRING, "Period");
        dataTable.addColumn(ColumnType.NUMBER, "Visitors");

        log.info("Lengths: \n"  
                + "data.getPeriodLabels() : " + data.getPeriodLabels().length + "\n"
                + "data.getWeeklyVisitors() : " + data.getWeeklyVisitors().length + "\n"
                + "data.getWeeklyVisitorsNew() : " + data.getWeeklyVisitorsNew().length + "\n"
                + "data.getWeeklyVisitorsReturning() : " + data.getWeeklyVisitorsReturning().length + "\n");

        String [] periods = data.getPeriodLabels(); 
        dataTable.addRows(periods.length);
        for (int i = 0; i < periods.length; i++) {
            dataTable.setValue(i, 0, periods[i]);
        }
        for (int col = 0; col < values.length; col++) {
            for (int row = 0; row < values[col].length; row++) {
                dataTable.setValue(row, col + 1, values[col][row]);
            }
        }

        // Set options
        LineChartOptions lineChartOptions = LineChartOptions.create();

        if (periodType == PeriodType.MONTHLY) {
            lineChartOptions.setTitle("Audience Overview: Monthly");
            lineChartOptions.setHAxis(HAxis.create("Month"));
        } 

        lineChartOptions.setVAxis(VAxis.create("Users"));

        // Draw the chart
        audienceLineChart.draw(dataTable, lineChartOptions);
    }

    private void drawAudiencePieChart(AudienceChartData data) {
        // Prepare the data
        DataTable dataTable = DataTable.create();
        dataTable.addColumn(ColumnType.STRING, "Category");
        dataTable.addColumn(ColumnType.NUMBER, "Number of users");

        dataTable.addRows(2);

        // Add data for returning visitors
        dataTable.setValue(0, 0, "Returning Visitor: " + data.getTotalVisitorsReturning());
        dataTable.setValue(0, 1, data.getTotalVisitorsReturning());

        // Add data for new visitors                
        dataTable.setValue(1, 0, "New Visitor: " + data.getTotalVisitorsNew());             
        dataTable.setValue(1, 1, data.getTotalVisitorsNew());

        // Set options
        PieChartOptions options = PieChartOptions.create();

        // options.setColors(colors);
        options.setIs3D(true);
        options.setTitle("Audience Overview (Total Visitors: " + data.getTotalVisitors() + ")");

        // Draw the chart
        audiencePieChart.draw(dataTable, options);
        audiencePieChart.addReadyHandler(new ReadyHandler() {

            @Override
            public void onReady(ReadyEvent event) {
                audiencePieChart.setSelection(Selection.create(1, null));
            }
        });
    }

    private void drawLikeCharts() {

        final PeriodType periodType = getView().getDisplayType().getSelectedIndex() == 0 ? PeriodType.MONTHLY : PeriodType.WEEKLY;

    reportingService.getLikesData(periodType, getView().getStartDate().getValue(), getView().getEndDate().getValue(), new AsyncCallback<LikesChartData>() {
        @Override
        public void onFailure(Throwable caught) {
            log.info("drawLikeCharts() onFailure()");
        }
        @Override
        public void onSuccess(LikesChartData data) {
            log.info("drawLikeCharts() onSuccess()");

            // Prepare the data
            DataTable dataTable = DataTable.create();

            dataTable.addColumn(ColumnType.STRING, "Period");
            dataTable.addColumn(ColumnType.NUMBER, "Likes");

            long[] likes = data.getLikes();
            String[] periods = data.getPeriodLabels();
            dataTable.addRows(data.getLikes().length);
            for (int i = 0; i < data.getLikes().length; ++i) {
                dataTable.setValue(i, 0, periods[i]);
                dataTable.setValue(i, 1, likes[i]);
            }

            // Set options
            ScatterChartOptions options = ScatterChartOptions.create();
            options.setTitle("Total Page Likes: " + data.getTotalLikes());
            options.setHAxis(HAxis.create("Periods"));
            options.setVAxis(VAxis.create("Number of Likes"));

            // Draw the chart
            likeScatterChart.draw(dataTable, options);
        }
    });
}

private void drawLikeChartsForProduct() {
    final PeriodType periodType = getView().getDisplayType().getSelectedIndex() == 0 ? PeriodType.MONTHLY : PeriodType.WEEKLY;

    int productId = Integer.parseInt(getView().getProductList().getSelectedValue());
    reportingService.getLikesData(productId, periodType, getView().getStartDate().getValue(), getView().getEndDate().getValue(), new AsyncCallback<LikesChartData>() {

        @Override
        public void onFailure(Throwable caught) {
            log.info("drawLikeChartsForProduct() onFailure()");
        }
        @Override
        public void onSuccess(LikesChartData data) {
            log.info("drawLikeChartsForProduct() onSuccess()");

            // Prepare the data
            DataTable dataTable = DataTable.create();

            dataTable.addColumn(ColumnType.STRING, "Period");
            dataTable.addColumn(ColumnType.NUMBER, "Likes");

            long[] likes = data.getLikes();
            String[] periods = data.getPeriodLabels();

            dataTable.addRows(data.getLikes().length);
            for (int i = 0; i < data.getLikes().length; ++i) {
                dataTable.setValue(i, 0, periods[i]);
                dataTable.setValue(i, 1, likes[i]);
            }

            // Set options
            ScatterChartOptions options = ScatterChartOptions.create();
            options.setTitle("Total Product Likes: " + data.getTotalLikes());
            options.setHAxis(HAxis.create("Periods"));
            options.setVAxis(VAxis.create("Number of Likes"));

            // Draw the chart
            likeScatterChartProduct.draw(dataTable, options);
        }
    });
}

Answer 1

您的代码看起来不错，请尝试调试获取的数据，看看获取数据后发生了什么，也许在调用draw（）方法之前转义了异常。

如果一切正确，请尝试以下操作：提取数据后，而不是调用

likeScatterChart.draw(dataTable, options);

尝试在此处创建图形对象并将其添加到rpc调用之后的包装器中，例如：

       Runnable onLoadCallback = new Runnable() {
              public void run() {
                  PieChart pie =new PieChart(createTable(), createPieChartOptions()); 
                  pie.setSize("100%", "100%");

                  getView().getPageChartWrap().add(pie);
              }
        };

        VisualizationUtils.loadVisualizationApi(onLoadCallback, PieChart.PACKAGE);

希望对您有帮助。