如何向GWT AnnotatedTimeLine或LineChart添加垂直线？

我想在带注释的时间线或折线图中添加一条垂直线，以指示当时发生的事件。我如何在GWT中做到这一点

谢谢

---

Sean Nguyen

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

---

基于asgallant的提示，我能够在GWT中实现这一点。这是密码

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

---

谢谢你的提示。我也不知道如何将注释添加到gwt。我是gwt的新手。您知道如何对gwt进行rpc调用吗？如果我能做到这一点，我可以在我的java脚本文件中应用您的代码，我不使用GWT，因此在这方面我帮不了您多少忙；我建议尝试在列上设置“role”属性。注释选项的工作原理应该与GWT中的其他图表选项完全相同。感谢您的指针，我在下面的响应中能够做到这一点。为什么具有

注释

角色的列必须始终是第二列？当柱放置在末端时，该行不显示。还是我遗漏了什么？我已经很久没有使用可视化API了，所以我不记得原因了。尝试将注释的索引设置为包含注释的列的索引。例如：如果注释位于第4列，请使用

注释：{3:{style:'line'}}

。

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

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