Question

我有一个GWT应用程序，它使用gwt-visualization显示多个图表。

我希望在我的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;
}

您知道我如何在列中显示列的值吗？

谢谢！

Answer 1

您可以使用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;            
        }-*/;

}

结果 enter image description here

Answer 2

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

按如下方式编写JSNI方法：

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

创建一个DataTable：

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

设置数据：

 dataTable.setValue(row, column, "Your text over here");

在ColumnChart中显示列内的值（不仅在悬停时）

2 个答案: