GWT图表：有时并非所有图表都显示
我有4个图表（1个饼图、1个折线图和2个散点图）需要立即加载。下面是我的代码的样子。我基本上都是跟着里面的。我的问题是，有时候，所有的图表都会显示，但有时候，只有一些图表会显示，其余的只是显示空白。我在想，可能是因为检索数据需要很长的加载时间，需要在图表上可视化。可能在某个地方有一些比赛条件，我不知道怎么弄清楚。如有任何帮助/建议，将不胜感激GWT图表：有时并非所有图表都显示,gwt,charts,Gwt,Charts,我有4个图表（1个饼图、1个折线图和2个散点图）需要立即加载。下面是我的代码的样子。我基本上都是跟着里面的。我的问题是，有时候，所有的图表都会显示，但有时候，只有一些图表会显示，其余的只是显示空白。我在想，可能是因为检索数据需要很长的加载时间，需要在图表上可视化。可能在某个地方有一些比赛条件，我不知道怎么弄清楚。如有任何帮助/建议，将不胜感激 public interface MyView extends View, HasUiHandlers<ReportsHandlers>
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);
}
});
}
likeScatterChart.draw(dataTable, options);
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);