如何將垂直線添加到GWT AnnotatedTimeLine或LineChart？

Question

我想添加一條垂直線到我的AnnotatedTimeLine或LineChart來指示當時發生的事件。我如何在GWT中做到這一點？

感謝，

肖恩·阮

Answer 1

我不知道這是在GWT實現支持與否，但在覈心JavaScript實現，你可以在使用「註釋」的角色列LineChart添加一條垂直線。將「字符串」類型列添加到您的DataTable中，緊跟在域（x軸）列之後，爲此列賦予「註釋」角色，併爲需要插入垂直線的任何x軸點輸入註釋標籤行（該列對其他行應該爲空）。在圖表的選項中，將此註釋的樣式指定爲「行」。

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

我能夠做到這一點在GWT的基礎上，從asgallant的提示。下面是代碼

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