Question

我为我的gwt项目制作了一个柱形图，我无法找到改变我的列颜色的方法。只有1个系列，我希望使用他们所谓的风格角色。现在我知道如何在javascript中执行此操作，因为它显示为here，但我在GWT中执行此操作时遇到了麻烦？

我有什么：

enter image description here

我想要的是什么：

enter image description here

Answer 1

为了获得不同的颜色，你应该有不同的系列。尝试这样的事情（未经测试）

  private DataTable createTable() {

        DataTable data = DataTable.create();       
        data.addRows(4); 

        data.addColumn(ColumnType.STRING, "Metal");        
        data.addColumn(ColumnType.NUMBER, "Density");

        data.setValue(0, 0, "Copper" );
        data.setValue(1, 0, "Silver");
        data.setValue(2, 0, "Gold");
        data.setValue(3, 0, "Platinum" );

        data.setValue(0, 1, 9);// 9 is the value of the density  
        data.setValue(1, 1, 11 );     
        data.setValue(2, 1, 19);       
        data.setValue(3, 1, 21); 

        return data;   

    }

    }

    private Options createOptions() {
        Options options = Options.create();    
        String[] colorArray = {"#B87333","#C0C0C0","#FFD700","#E5E4E2"};
        options.setColors(colorArray);
        //Other options
         return options;
    }

修改

所以我的第一个解决方案没有实现所需的显示，为了使其正常工作，需要一个解决方法，因为为GWT提供的API不提供这样的选项。

每个元素都应该有一列和一行。此外，为了使每个条与其标签对齐，必须将属性isStacked设置为true。这是工作示例。

其他选项可用here

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.AbstractDataTable.ColumnType; 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; public class TestBar 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 = DataTable.create(); data.addColumn(ColumnType.STRING, "Metal"); data.addColumn(ColumnType.NUMBER, "Copper"); data.addColumn(ColumnType.NUMBER, "Silver"); data.addColumn(ColumnType.NUMBER, "Gold"); data.addColumn(ColumnType.NUMBER, "Platinum"); data.addRows(4); data.setValue(0, 0, "Copper"); data.setValue(0, 1, 9); data.setValue(1, 0, "Silver"); data.setValue(1, 2, 11); data.setValue(2, 0, "Gold"); data.setValue(2, 3, 19); data.setValue(3, 0, "Platinum"); data.setValue(3, 4, 21); return data; } private Options createOptions() { Options options = getNativeOptions(); String[] colorArray = { "#B87333", "#C0C0C0", "#FFD700", "#E5E4E2" }; options.setColors(colorArray); 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, isStacked : true, orientation : 'horizontal', legend: { position: "bottom" }, }; return options; }-*/; }

结果

Answer 2

我没有找到任何方法在一个系列中使用不同颜色的列，但我尝试了不同的方式。

我创建了多个系列，但没有列，现在我可以为每个系列设置不同的颜色。

视觉上它与最终用户显示相同。

以下是代码：

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.RootLayoutPanel;
import com.google.gwt.user.client.ui.SimpleLayoutPanel;
import com.google.gwt.user.client.ui.Widget;
import com.googlecode.gwt.charts.client.ChartLoader;
import com.googlecode.gwt.charts.client.ChartPackage;
import com.googlecode.gwt.charts.client.ColumnType;
import com.googlecode.gwt.charts.client.DataTable;
import com.googlecode.gwt.charts.client.corechart.ColumnChart;
import com.googlecode.gwt.charts.client.corechart.ColumnChartOptions;
import com.googlecode.gwt.charts.client.corechart.ColumnChartSeries;
import com.googlecode.gwt.charts.client.options.HAxis;
import com.googlecode.gwt.charts.client.options.VAxis;

public class ChartDemo implements EntryPoint {
    private SimpleLayoutPanel layoutPanel;
    private ColumnChart chart;

    /*
     * This is the entry point method.
     */
    public void onModuleLoad() {
        addColumnChart();
    }

    private void addColumnChart() {
        Window.enableScrolling(false);
        Window.setMargin("0px");

        RootLayoutPanel.get().add(getSimpleLayoutPanel());

        // Create the API Loader
        ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
        chartLoader.loadApi(new Runnable() {

            @Override
            public void run() {
                getSimpleLayoutPanel().setWidget(getChart());
                drawChart();
            }
        });
    }

    private SimpleLayoutPanel getSimpleLayoutPanel() {
        if (layoutPanel == null) {
            layoutPanel = new SimpleLayoutPanel();
        }
        return layoutPanel;
    }

    private Widget getChart() {
        if (chart == null) {
            chart = new ColumnChart();
        }
        return chart;
    }

    private void drawChart() {
        // Prepare the data
        DataTable dataTable = DataTable.create();
        dataTable.addColumn(ColumnType.STRING, "Density");
        dataTable.addColumn(ColumnType.NUMBER, "Copper");
        dataTable.addColumn(ColumnType.NUMBER, "Silver");
        dataTable.addColumn(ColumnType.NUMBER, "Gold");
        dataTable.addColumn(ColumnType.NUMBER, "Platinum");

        dataTable.addRows(1);

        dataTable.setValue(0, 0, "");
        dataTable.setValue(0, 1, 8.94);
        dataTable.setValue(0, 2, 10.49);
        dataTable.setValue(0, 3, 19.30);
        dataTable.setValue(0, 4, 21.45);

        // Draw the chart
        ColumnChartOptions options = ColumnChartOptions.create();
        options.setVAxis(VAxis.create("Density"));
        options.setHAxis(HAxis.create("Metel"));

        String[] colors = new String[] { "#b87333", "silver", "gold", "#e5e4e2" };
        for (int i = 0; i < colors.length; i++) {
            ColumnChartSeries series = ColumnChartSeries.create();
            series.setColor(colors[i]);
            options.setSeries(i, series);
        }
        options.setTitle("Density of Precious Metals, in g/cm^3");

        chart.draw(dataTable, options);
    }

}

Screenshot

Answer 3

值得注意的是，似乎有一个更新的项目为GWT包装了这个：https://code.google.com/p/gwt-charts/，这样可以很容易地设置角色，所以每条颜色，工具提示等......很简单。

Answer 4

在服务器端，您可以使用类似

的内容

        List<ColumnDescription> cd = new ArrayList<ColumnDescription>();
        cd.add(new ColumnDescription("status", ValueType.TEXT, "STATUS"));
        cd.add(new ColumnDescription("count", ValueType.NUMBER, "COUNT"));
        ColumnDescription c = new ColumnDescription("role", ValueType.TEXT, "role");
        c.setCustomProperty("role", "style");
        cd.add(c);

        data.addColumns(cd);

        TableRow row = new TableRow();
        row.addCell("TOTAL");
        row.addCell(rs.getInt("totalApplications"));
        row.addCell("black");
        data.addRow(row);

        row = new TableRow();
        row.addCell("PENDING");
        row.addCell(rs.getInt("PendingApplications"));
        row.addCell("yellow");
        data.addRow(row);

        row = new TableRow();
        row.addCell("APPROVED");
        row.addCell(rs.getInt("approvedApplications"));
        row.addCell("green");
        data.addRow(row);

        row = new TableRow();
        row.addCell("DECLINED");
        row.addCell(rs.getInt("declinedApplications"));
        row.addCell("red");
        data.addRow(row);

        row = new TableRow();
        row.addCell("CONDITIONAL");
        row.addCell(rs.getInt("ConditionalApplications"));
        row.addCell("orange");
        data.addRow(row);

        row = new TableRow();
        row.addCell("WITHDRAWN");
        row.addCell(rs.getInt("WithdrawnApplications"));
        row.addCell("red");
        data.addRow(row);

        String json = JsonRenderer.renderDataTable(data, true, false, false).toString();

创建JSON对象，如：

    {
        "cols":[{"id":"status","label":"STATUS","type":"string","pattern":""},
                {"id":"count","label":"COUNT","type":"number","pattern":""},   
                {"id":"role","label":"role","type":"string","pattern":"","p":{"role":"style"}}],

        "rows":[
               {"c":[{"v":"TOTAL"},{"v":10.0},{"v":"black"}]},{"c":[{"v":"PENDING"},
               {"v":2.0},{"v":"yellow"}]},{"c":[{"v":"APPROVED"},{"v":5.0},{"v":"green"}]},
               {"c":[{"v":"DECLINED"},{"v":1.0},{"v":"red"}]},{"c":[{"v":"CONDITIONAL"},
               {"v":1.0},{"v":"orange"}]},{"c":[{"v":"WITHDRAWN"},{"v":1.0},{"v":"red"}]}
               ]

     }

显示如下：

Answer 5

我想出了一种扩展DataTable的方法，并在其中包含一个样式列：

public class StyledDataTable extends DataTable{

protected StyledDataTable(){}

  public final native void addStyleColumn()/*-{
    this.addColumn({type: 'string', role: 'style'});
  }-*/;

}

然后像这样实例化你的表：

    StyledDataTable data = (StyledDataTable)DataTable.create();

    data.addColumn(ColumnType.STRING, HEADER_1);
    data.addColumn(ColumnType.NUMBER, HEADER_2);
    data.addStyleColumn();
    data.setValue(0, 0, SOMEVALUE1);
    data.setValue(0, 1, SOMEVALUE2);
    data.setValue(0, 2, "color: green; opacity: 0.85");
    data.setValue(1, 0, SOMEVALUE3);
    data.setValue(1, 1, SOMEVALUE4);
    data.setValue(1, 2, "color: blue; opacity: 0.85");

Answer 6

我想扩展 garagebrewer 提供的工作答案。

这是Google提供的条形码自定义的全部规格：https://developers.google.com/chart/interactive/docs/gallery/barchart#coloring-bars

首先，我们需要做的是创建一个类。让我们使用以下名称（作为 garagebrewer 在他的帖子中称为它）：“StyledDataTable”

import com.googlecode.gwt.charts.client.DataTable;

public class StyledDataTable extends DataTable {

    protected StyledDataTable(){}

    public final native void addStyleColumn()/*-{
      this.addColumn({type: 'string', role: 'style'});
    }-*/;

}

现在，我们可以创建我们的DataTable，选项和图表：

private void initializeTestChart() {
    ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);

    chartLoader.loadApi(new Runnable() {

        @Override
        public void run() {
            StyledDataTable dataTable = (StyledDataTable)DataTable.create();

            int row = 0;
            dataTable.addColumn(ColumnType.STRING, "Title");
            dataTable.addColumn(ColumnType.NUMBER, "Column1");
            dataTable.addStyleColumn();
            dataTable.addColumn(ColumnType.NUMBER, "Column2");
            dataTable.addStyleColumn();
            dataTable.addColumn(ColumnType.NUMBER, "Column3");
            dataTable.addStyleColumn();
            dataTable.addColumn(ColumnType.NUMBER, "Column4");
            dataTable.addStyleColumn();
            dataTable.addRows(2); 

            dataTable.setValue(row, 0, "ABC");
            dataTable.setValue(row, 1, 0.20);
            dataTable.setValue(row, 2, "color: red; opacity: 0.85; stroke-color: #871B47; stroke-opacity: 0.6;");
            dataTable.setValue(row, 3, 0.40);
            dataTable.setValue(row, 4, "color: yellow; opacity: 0.85; stroke-color: white; stroke-opacity: 0.6;");
            dataTable.setValue(row, 5, 0.60);
            dataTable.setValue(row, 6, "color: yellow; opacity: 0.85; stroke-color: white; stroke-opacity: 0.6;");
            dataTable.setValue(row, 7, 0.10);
            dataTable.setValue(row, 8, "color: red; opacity: 0.85; stroke-color: #871B47; stroke-opacity: 0.6;");
            row++;
            dataTable.setValue(row, 0, "DEF");
            dataTable.setValue(row, 1, 1.0);
            dataTable.setValue(row, 2, "color: green; opacity: 0.85; stroke-color: white; stroke-opacity: 0.6;");
            dataTable.setValue(row, 3, 0.90);
            dataTable.setValue(row, 4, "color: green; opacity: 0.85; stroke-color: white; stroke-opacity: 0.6;");
            dataTable.setValue(row, 5, 0.10);
            dataTable.setValue(row, 6, "color: red; opacity: 0.85");
            dataTable.setValue(row, 7, 0.50);
            dataTable.setValue(row, 8, "color: yellow; opacity: 0.85; stroke-color: blue; stroke-opacity: 1.0; stroke-width:6");

            BarChart barTestChart1 = new BarChart();
            barTestChart1.setWidth("100%");
            barTestChart1.setHeight("100%");

            // adding chart to a MaterialCard: "barTestChartCard1"
            barTestChartCard1.getCardContentPanel().add(barTestChart1);

            BarChartOptions barOpt1 = BarChartOptions.create();
            barOpt1.setColors("00bcd4", "26c6da", "4dd0e1", "80deea", "b2ebf2");
            barOpt1.setHeight(500);
            barOpt1.setEnableInteractivity(true);
            barOpt1.setIsStacked(false);
            HAxis h1 = HAxis.create();
            h1.setFormat("#%");
            barOpt1.setHAxis(h1);

            barTestChart1.draw(dataTable, barOpt1);
        }
    });
}

因此，我们能够为每个条形指定单独的样式（颜色，笔触，不透明度等），因为我们在每个列之后添加了styleColumn。

就是这样，非常感谢 garagebrewer 的工作解决方案！

您可以在此图片上看到此代码的结果：

使用样式角色的GWT Google Visualization柱形图

6 个答案: