0

我有一个 GWT 应用程序，它显示带有 gwt 可视化的多个图表。

我想在我ColumnChart里面列的值。

在官方文档中，我们可以看到DataView我们可以在列内添加值： https ://developers.google.com/chart/interactive/docs/gallery/columnchart

（请在“这比应有的复杂一点，因为我们创建一个DataView为每一列指定注释”之前查看我想要的图形类型。）

在这里，我的实际代码仅在我们将列悬停时才显示该值：

ColumnChart col = new ColumnChart(createColTable(), createColOptions());
fp.add(col);

private AbstractDataTable createColTable() {
    int maxNbLines = 5;

    DataTable data = DataTable.create();
    data.addColumn(ColumnType.STRING, messages.user());
    data.addColumn(ColumnType.NUMBER, messages.nbMsg());
    data.addColumn(ColumnType.NUMBER, messages.nbTot());

    data.addRows(maxNbLines);

    if (this.getMetrics().size() > 0) {
        int j = 0;

        for (java.util.Map.Entry<String,UIMetricsBean> entry : 
            this.getDayMetrics().entrySet()) {
            String key = entry.getKey();
            UIMetricsBean value = entry.getValue();
            data.setValue(j, 0, key);
            data.setValue(j, 1, value.getNbTotal());
            data.setValue(j, 2, value.getNbBad());

            j++;
            if(j >= maxNbLines) {
                break;
            }
        }
    }

    return data;
}
private Options createColOptions() {
    TextStyle titleTextStyle = TextStyle.create();
    titleTextStyle.setFontSize(18);
    titleTextStyle.setColor(COLOR_RED);

    Options options = Options.create();
    options.setWidth(720);
    options.setHeight(350);
    options.setTitle(messages.tot());
    options.setColors(COLOR_GRAY, COLOR_RED);
    options.setBackgroundColor(COLOR_BACKGROUND_GRAY);

    TextStyle axisTextStyle = TextStyle.create();
    axisTextStyle.setFontSize(8);
    HorizontalAxisOptions hAxisOption = HorizontalAxisOptions.create();
    hAxisOption.setTextStyle(axisTextStyle);
    options.setHAxisOptions(hAxisOption);
    options.setTitleTextStyle(titleTextStyle);

    return options;
}

你知道我如何在列内显示列的值吗？

谢谢！

4

2 回答 2

0

可以使用可视化 API 轻松完成，如下所示。

编写JSNI方法如下：

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

创建数据表：

     DataTable dataTable = DataTable.create();
     addAnnotationColumn(dataTable);

设置数据：

 dataTable.setValue(row, column, "Your text over here");
于 2014-11-05T11:47:11.790 回答
0

您可以使用 JSNI 和注释来实现这一点。这是一个工作示例。您仍然需要将数据作为数组传递给 JSNI。

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.Panel;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.visualization.client.AbstractDataTable;
import com.google.gwt.visualization.client.DataTable;
import com.google.gwt.visualization.client.VisualizationUtils;
import com.google.gwt.visualization.client.visualizations.corechart.BarChart;
import com.google.gwt.visualization.client.visualizations.corechart.Options;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class TestChart implements EntryPoint {


     public void onModuleLoad() {
            final FlowPanel flowPanel = new FlowPanel();
            Panel panel = RootPanel.get();
            panel.add(flowPanel);
            Runnable onLoadCallback = new Runnable() {
                public void run() {
                    BarChart bar = new BarChart(createTable(), createOptions());
                    flowPanel.add(bar);    
                }
            };
            VisualizationUtils.loadVisualizationApi(onLoadCallback, BarChart.PACKAGE);
        }

        private AbstractDataTable createTable() {
            DataTable data = createTemplate();          
            return data;
        }

        private Options createOptions() {
            Options options = getNativeOptions();
           //set other options
            return options;
        }

        private native Options getNativeOptions() /*-{
            var options = @com.google.gwt.visualization.client.visualizations.corechart.Options::create()();
            options = {
                fontName : 'Calibri',
                fontSize : 12,
                width: 600,
                height: 400,
                displayAnnotations: true,
                orientation : 'horizontal',
                legend: { position: "none" },
            };
            return options;
        }-*/;

        private native DataTable createTemplate() /*-{      
              var data = $wnd.google.visualization.arrayToDataTable([
                ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
                ['Copper', 8.94, '#b87333', '8.94' ],
                ['Silver', 10.49, 'silver', '10.49' ],
                ['Gold', 19.30, 'gold', '19.30' ],
                ['Platinum', 21.45, 'color: #e5e4e2', '21.45' ]
        ]);      
        return data;            
        }-*/;

}

结果 在此处输入图像描述

于 2014-03-21T18:39:46.450 回答