ComboChart与注释文本在GWT谷歌的可视化(ComboChart with annotati

2019-10-17 09:29发布

我使用GWT可视化 (周围的包装图表工具 )。 我有一个ComboChart包括两个柱状图(层叠)和一个线路图,我想一个添加annotationannotationText到某些行。

DataTable的定义如下:

private DataTable buildData() {

    DataTable data = DataTable.create();
    data.addColumn(ColumnType.STRING, "Day");
    data.addColumn(ColumnType.NUMBER, "Domain");
    data.addColumn(ColumnType.NUMBER, "Domain (Source 1)");
    data.addColumn(ColumnType.NUMBER, "Domain (Source 2)");

    addAnnotationColumn(data);

    return data;
}

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

然后图表选项...

private ComboChart.Options createComboOptions(String title) {
    ComboChart.Options options = ComboChart.createComboOptions();
    Series line = Series.create();
    line.setType(Type.LINE);
    options.setSeries(0, line);

    Series bars1 = Series.create();
    bars1.setType(Type.BARS);
    options.setSeries(1, bars1);

    Series bars2 = Series.create();
    bars2.setType(Type.BARS);
    options.setSeries(2, bars2);

    options.setIsStacked(true);
    return options;
}

这导致了这样的事情:

我需要的是添加注释到某些行的线串联 ,或者换句话说, 如何设置角色在ComboChart,但我似乎无法找到如何做到这一点的GWT任何文件(甚至该怎么办它在在ComboChart纯JS)。 救命?

Answer 1:

关于谷歌图表角色的文档可以找到这里 。

为了增加实际注释你可以使用内置的GWT功能( setValue()类似的东西:

private DataTable buildData() {

    DataTable data = DataTable.create();
    data.addColumn(ColumnType.STRING, "Day");
    data.addColumn(ColumnType.NUMBER, "Domain");
    data.addColumn(ColumnType.NUMBER, "Domain (Source 1)");
    data.addColumn(ColumnType.NUMBER, "Domain (Source 2)");

    addAnnotationColumn(data);

    for (int i =0;i<dataLength;i++) {
        data.addRow();
        data.setValue(i,0,'DAY');
        data.setValue(i,1,DOMAIN);
        data.setValue(i,2,DOMAIN_SOURCE1); 
        data.setValue(i,3,DOMAIN_SOURCE2);
        data.setValue(i,4,ANNOTATION);
        data.setValue(i,5,ANNOTATION_TEXT);
    }

    return data;
}


Answer 2:

原来,ComboChart添加标注/ annotationText列最后在图上创建的系列 - 这意味着中被添加到条形图,它不支持在ComboChart注释的角色。

线图,然而,支持它们 - 因此,“脏修复”是有行系列是在图中的最后一个:

private ComboChart.Options createComboOptions(String title) {
    ComboChart.Options options = ComboChart.createComboOptions();

    Series bars1 = Series.create();
    bars1.setType(Type.BARS);
    options.setSeries(0, bars1);

    Series bars2 = Series.create();
    bars2.setType(Type.BARS);
    options.setSeries(1, bars2);

    Series line = Series.create();
    line.setType(Type.LINE);
    options.setSeries(2, line);

    options.setIsStacked(true);
    return options;
}


文章来源: ComboChart with annotation text in gwt google-visualization