gwt - 如何在 GWT AnnotatedTimeLine 或 LineChart 中添加垂直线？

Question

我想在 AnnotatedTimeLine 或 LineChart 中添加一条垂直线，以指示当时发生的事件。我怎样才能在 GWT 中做到这一点？

谢谢，

肖恩·阮

Answer 1

我不知道 GWT 实现是否支持这一点，但在核心 javascript 实现中，您可以使用 LineChart 中的“注释”角色列添加垂直线。在您的数据表中添加一个“字符串”类型的列，紧跟在域（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

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