Question

我正在开发一个在GWT框架下编码的GUI。但是，我注意到一个故障，我不知道原因是什么。好吧，我的想法是打印一组类似的标签。每个选项卡都包含一个水平面板，右侧将AnnotatedTimeLine对象与适当的数据集成在一起。绘制选项卡的代码如下：

for(String sBuilding : lsBuildings){
    if(sBuilding.equals(BuildingCodes.getsTucBuildingCode())){  
        tabLayoutPanel.add(printScreen.printScreen(hmTucData, hmMonthTucData, "TUC"), "TUC offices", true);
    }
    else if(sBuilding.equals(BuildingCodes.getsCartifBuildingCode())){
        tabLayoutPanel.add(printScreen.printScreen(hmCartifData, hmMonthCartifData, "CARTIF"), "CARTIF offices", true);
    }
    else if(sBuilding.equals(BuildingCodes.getsZubBuildingCode())){
        tabLayoutPanel.add(printScreen.printScreen(hmZubData, hmMonthZubData, "ZUB"), "ZUB offices", true);
    }
    else if(sBuilding.equals(BuildingCodes.getsSierraBuildingCode())){
        tabLayoutPanel.add(printScreen.printScreen(hmSierraData, hmMonthSierraData, "SIERRA"), "Sierra Elvira School", true);
    }
}

如您所见，我根据我想要显示的数据添加一个标签（即hmXXXXData和hmMonthXXXXData）。在printScreen方法中，我按如下方式打印AnnotatedTimeLine：

//If the data is not collected, no graph should be displayed
    if(hmMonthData.size() > 0){

        //Get the list of values of the sensors in the Zone visible in the stack panel
        final Map<String, Map<String,String>> hmSensorsByZone = hmMonthData.get(sSelectedZone);

        //Get the list of sensors associated to the Zone selected
        Object[] asSensors = hmSensorsByZone.keySet().toArray();

        //Only if the length of sensors is upper than 0
        if(asSensors.length > 0){

            final List<String> lsSensors = new ArrayList<String>();

            for(int i = 0; i < asSensors.length; i++){
                lsSensors.add(asSensors[i].toString());
            }

            // Chart for printing the trends of the last month for the variable
            Runnable onLoadCallback = new Runnable() {
                public void run() {             
                    DataTable data = DataTable.create();
                    //Columnas a mostrar, la primera para el eje de abscisas (fecha) y la segunda para
                    //los valores en el eje de ordenadas
                    data.addColumn(ColumnType.DATE, "Date");

                    for(String sSensor : lsSensors){
                        data.addColumn(ColumnType.NUMBER, sSensor);
                    }

                    DateTimeFormat dtf = DateTimeFormat.getFormat("dd/MM/yy hh:mm:ss");

                    //Se añaden los valores y los puntos para dibujar la gráfica
                    for(int j = 0; j < lsSensors.size(); j++){
                        //Delete all the rows related to the sensor j

                        Map<String,String> hmValues = hmSensorsByZone.get(lsSensors.get(j));

                        //Only if the size of the values is upper than 0
                        if(hmValues.size() > 0){

                            Object[] asTimestamps = (Object[]) hmValues.keySet().toArray(); 
                            Object[] asValues = (Object[]) hmValues.values().toArray(); 

                            if(data.getNumberOfRows() < asTimestamps.length)
                                data.addRows(asTimestamps.length - data.getNumberOfRows()); 

                            for(int i = 0; i < asTimestamps.length; i++){
                                String sTimestamp = asTimestamps[i].toString();
                                String sValue = asValues[i].toString();
                                Double dValue = Double.valueOf(sValue);

                                data.setValue(i, 0, dtf.parse(sTimestamp)); 
                                data.setValue(i, j+1, dValue);
                            }
                        }
                    }       
                    //Opciones de graficado
                    AnnotatedTimeLine.Options options = AnnotatedTimeLine.Options.create();
                    options.setDisplayAnnotations(true);
                    options.setDisplayZoomButtons(true);
                    options.setScaleType(AnnotatedTimeLine.ScaleType.ALLMAXIMIZE);
                    options.setLegendPosition(AnnotatedTimeLine.AnnotatedLegendPosition. NEW_ROW);
                    AnnotatedTimeLine atl = new AnnotatedTimeLine(data, options,"475px", "310px");
                    atlHorizontalPanel.add(atl);
                }

            };
            //The APO for visualization is loaded in order to show the graph
            VisualizationUtils.loadVisualizationApi(onLoadCallback,AnnotatedTimeLine.PACKAGE);
        }
    }

我发现第一个标签会打印图表，但其余标签根本不会加载图表。你知道造成这种不端行为的原因是什么吗？

非常感谢您提前

Answer 1

有一个可能相关的开放issue。

我认为无法在隐藏容器中绘制/创建图表，然后使容器可见。

只有在附加到DOM的可见容器内绘制/创建图表时，图表才会正确呈现。

TabPanel：

有一种解决方法

@UiHandler("tabPanel")
void handleSelect(SelectionEvent<Integer> e) {
    /* redraw only when switching to tab that contains visualization */
    if (e.getSelectedItem() == 1) {
        Scheduler.get().scheduleDeferred(new ScheduledCommand() {
            @Override
            public void execute() {
                drawVisualization();
            }
        });
    }
}

我还建议使用非官方的gwt-charts包装器而不是过时的官方gwt-visualization包装器。这将解决所有问题并适当调整图表大小。

复制的AnnotatedTimeLine GWT

1 个答案: