Question

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

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

我希望这会对你有所帮助。

GWT图表：有时候所有图表都没有显示

1 个答案: