java - 复制的 AnnotatedTimeLine GWT

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 包装器。这将解决所有问题并正确调整图表大小。