GWT AnnotatedTimeLine 또는 LineChart에 수직선을 추가하는 방법은 무엇입니까?

Question

AnnotatedTimeLine 또는 LineChart에 수직선을 추가하여 해당 시점에 발생하는 이벤트를 나타냅니다. GWT에서 어떻게 할 수 있습니까?

감사합니다,

숀 구엔

Answer 1

이는 GWT 구현에서 지원 여부를 경우 나도 몰라,하지만 자바 스크립트 구현의 핵심에, 당신은에서 "주석"역할 열을 사용할 수 있습니다 수직선을 추가하는 LineChart. DataTable에 "문자열"유형 열을 도메인 (x 축) 열 바로 뒤에 추가하고이 열에 "주석"역할을 부여하고 세로를 삽입해야하는 x 축 지점에 주석의 레이블을 입력합니다 행 (이 C 럼은 다른 행의 경우 널 (NULL)이어야합니다). 차트 옵션에서이 주석의 스타일을 "선"으로 지정하십시오.

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에서 그 사실을 알고 있었다. 여기에 코드에게 힌트

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