Question

我想在AnnotatedTimeLine或LineChart中添加一条垂直线来表示当时发生的事件。我怎么能在GWT中做到这一点？

谢谢，

Sean Nguyen

Answer 1

我不知道GWT实现是否支持此功能，但在核心javascript实现中，您可以在LineChart中使用“注释”角色列来添加垂直线。在“域”（x轴）列之后立即向DataTable添加“字符串”类型列，为此列指定“注释”角色，并在需要插入垂直的任何x轴点处为注释输入标签line（对于其他行，此列应为null）。在图表的选项中，将此注释的样式指定为“line”。

function drawChart () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn({type: 'string', role: 'annotation'});
    data.addColumn('number', 'Value');

    data.addRows([
        ['Foo', null, 4],
        ['Bar', null, 3],
        ['Baz', null, 7],
        ['Bat', null, 9],
        ['Cad', 'Vertical line here', 9],
        ['Qud', null, 2],
        ['Piz', null, 6]
    ]);

    var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
    chart.draw(data, {
        height: 300,
        width: 400,
        annotation: {
            // index here is the index of the DataTable column providing the annotation
            1: {
                style: 'line'
            }
        }
    });
}

Answer 2

我能够根据asgallant的提示在GWT中做到这一点。这是代码

private native void addAnnotationColumn(DataTable data) /*-{
        data.addColumn({type:'string', role:'annotation'});
    }-*/;

Answer 3

 drawAnnotationTableInGWT(){    


private AnnotationChart annotatedChart; 



dataTable.addColumn(ColumnType.DATE,"DateTime");    
        dataTable.addColumn(ColumnType.NUMBER , "fuel capacity");    
        dataTable.addColumn(ColumnType.STRING,"Fuel info");    
        dataTable.addColumn(ColumnType.NUMBER, "Speed (in kmph)");    
        dataTable.addColumn(ColumnType.STRING,"Speed info");        
        //dataTable.addColumn(ColumnType.STRING);    

dataTable.addRows(5);    

dataTable.setValue(0, 0,new Date("10/07/1993")); 




dataTable.setValue(0, 0,22);    
dataTable.setValue(1, 0,"khkjh");    
dataTable.setValue(1, 0,"sggixg");    
dataTable.setValue(0, 0,new Date("10/07/1993"));    
dataTable.getColumnRange(1);    

annotatedChart= new AnnotationChart();    
        annotatedChart.draw(dataTable,options());    
HoriZontalPanel chartPanel.add(annotatedChart);    
        String height=vpMain.getOffsetHeight()-110+"px";    
        annotatedChart.setSize("99%", height);    
        annotatedChart.getElement().getStyle().setPaddingRight(0, Unit.PX);    
        annotatedChart.getElement().getStyle().setPaddingLeft(0, Unit.PX);    
}        
private AnnotationChartOptions options(){    
        AnnotationChartOptions options=AnnotationChartOptions.create();    
        options.setDisplayAnnotations(true);    
        options.setDisplayZoomButtons(false);    
        options.setDisplayLegendDots(true);    
        options.setAnnotationsWidth(20);    
        options.setZoomStartTime(startDate);    
        options.setZoomEndTime(endDate);
        options.setDisplayExactValues(true);
        options.setAllowHtml(true);
        options.setThickness(2);
        options.setDateFormat("dd-MM-yyyy hh:mm a");
        options.setScaleType(ScaleType.ALLFIXED);
        options.setLegendPosition(ColoredLegendPosition.NEWROW);
        options.setColors("#66b032","#DC3912","#4684EE");
       // options.setAnnotationsWidth(200);
        return options;
    }

如何在GET Annotated TimeLine或Line Chart中添加垂直线？

3 个答案: