0

gwt-visualization を使用して複数のグラフを表示する 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 = 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 に答える