如何显示“单个条形图”在TableView（javaFX 8）的TableColumn中？ [英] How do I display a "single bar chart" in a TableColumn of a TableView (javaFX 8)?

问题描述

以下是屏幕截图：

感兴趣的部分：右上部分和下部分

有一个规则被选择;此规则具有：1080个总调用，包括274个成功调用和84个成功空调用。现在我显示成功与总数的比率，空的vs成功。

我想要做的是废弃比率，使用与上述饼图相同的颜色方案，显示非空成功/空成功/失败的比率的单个图形条。

我有一个问题是，我没有做任何事情的配色方案。下面是填充饼图的代码：

  @Override 
 public void loadPieChart（final int failedMatches，final int emptyMatches，
 final int nonEmptyMatches）
 {
 final int totalInvocations = failedMatches + emptyMatches 
 + nonEmptyMatches; 
 final List< Data> list = new ArrayList<>（3）; 
 
 int nr; 
 double percent; 
 String fmt; 
 
 / * 
 *失败
 * / 
 nr = failedMatches; 
 percent = 100.0 * nr / totalInvocations; 
 fmt = String.format（Failures（％d  - ％.02f %%），nr，percent）; 
 list.add（new Data（fmt，percent））; 
 
 / * 
 *空
 * / 
 nr = emptyMatches; 
 percent = 100.0 * nr / totalInvocations; 
 fmt = String.format（空匹配（％d  - ％.02f %%），nr，percent）; 
 list.add（new Data（fmt，percent））; 
 
 / * 
 *非空
 * / 
 nr = nonEmptyMatches; 
 percent = 100.0 * nr / totalInvocations; 
 fmt = String.format（非空匹配（％d;％.02f %%），nr，percent）; 
 list.add（new Data（fmt，percent））; 
 
 display.matchChart.getData（）。setAll（list）; 
 
 fmt = String.format（Rule rundown（％d total），totalInvocations）; 
 display.matchChart.setTitle（fmt）; 
} 
  

获取数据不是问题，问题是我不能在JavaFX中找到javadoc如何显示一个单个图形栏像上面的...

我从哪里开始？

（哦，我在图形上吸吮，甚至不要求我画我想要的东西;如果需要更多的精确，我会很高兴地给他们）

---

EDIT 确定，以下是我的意思示例：

http://www.highcharts.com/demo/bar-stacked p>

除了我只需要一个吧，我不在乎弹出菜单，我不想轴，我不想传说，我只想要

$ b =https://i.stack.imgur.com/mKjHI.pngalt =enter image description here>

目标是替换最后一个列和我不知道如何生成的darned图形：（

解决方案

  import javafx.application.Application; 
 import javafx.beans.property.ReadOnlyObjectWrapper; 
 import javafx.beans.property.SimpleIntegerProperty; 
 import javafx.collections.FXCollections; 
 import javafx.collections.ObservableList; 
 import javafx.scene.Scene; 
 import javafx.scene.control.TableCell; 
 import javafx.scene.control.TableColumn; 
 import javafx.scene.control.TableView; 
 import javafx.scene.layout.HBox; 
 import javafx.scene.shape.Rectangle; 
 import javafx.stage.Stage; 
 
 public class TableBar extends应用程序{
 public static void main（String [] args）{launch（args）; } 
 
 @Override 
 public void start（Stage stage）{
 ObservableList< Data> data = FXCollections.observableArrayList（）; 
 for（int i = 0; i <10; i ++）data.add（new Data（））; 
 
 TableView< Data> tv = new TableView（data）; 
 TableColumn< Data，Number> col1 = new TableColumn（num1）; 
 TableColumn< Data，Number> col2 = new TableColumn（num2）; 
 col1.setCellValueFactory（（p） - > {return p.getValue（）。num1;}）; 
 col2.setCellValueFactory（（p） - > {return p.getValue（）。num2;}）; 
 
 //使此列保存整个Data对象，以便我们可以访问所有字段
 TableColumn< Data，Data> col3 = new TableColumn（bar）; 
 col3.setPrefWidth（100）; 
 col3.setCellValueFactory（（p） - > {return new ReadOnlyObjectWrapper<>（p.getValue（））;}）; 
 col3.setCellFactory（（TableColumn< Data，Data> param） - > {
 return new TableCell< Data，Data>（）{
 
 @Override 
 protected void updateItem（data item，boolean empty）{
 super.updateItem（item，empty）; 
 if（empty）setGraphic（null）; 
 else {
 double tot = item.num1.get（）+ item.num2.get（）; 
 double ratio1 = item.num1.get（）/ tot; 
 double ratio2 = item.num2.get（）/ tot; 
 
 Rectangle r1 = new Rectangle（）; 
 // param是列，bind使用列
调整大小调整r1.widthProperty（）。bind（param.widthProperty ）.multiply（ratio1））; 
 r1.heightProperty（）。bind（this.getTableRow（）。heightProperty（）。multiply（0.5））; 
 r1.setStyle（ -  fx-fill： ＃f3622d;）; 
 Rectangle r2 = new Rectangle（0，20）; 
 r2.widthProperty（）。bind（param.widthProperty（）。multiply（ratio2））; 
 r2.setStyle（ -  fx-fill：＃fba71b;）; 
 
 HBox hbox = new HBox（r1，r2）; 
 hbox.setAlignment（Pos.CENTER_LEFT）; 
 setGraphic（hbox）; 
 SetText（null）; 
} 
} 
 
}; 
}）; 
 
 tv.getColumns（）。addAll（col1，col2，col3）; 
场景scene = new Scene（tv）; 
 
 stage.setScene（scene）; 
 stage.show（）; 
} 
 
 class Data {
 private SimpleIntegerProperty num1 = new SimpleIntegerProperty（（int）（Math.random（）* 1000） 
 private SimpleIntegerProperty num2 = new SimpleIntegerProperty（（int）（Math.random（）* 1000））; 
 
 public SimpleIntegerProperty num1Property（）{return num1;} 
 public SimpleIntegerProperty num2Property（）{return num2;} 
} 
} 
  

我刚刚意识到应该有3个数字，但我相信你会得到这个想法。

Here is a screenshot:

Of interest: the upper right part and the lower part.

In the lower part, there is one rule selected; this rule has: 1080 total invocations, including 274 successful invocations and 84 successful empty invocations. Right now I am displaying the ratio of successful vs total, and empty vs successful.

What I'd like to be able to do is scrap the ratios and instead have a single graphical bar showing the ratios of non empty successes/empty successes/failures, using the same color scheme as the pie chart above...

And one problem that I have is that I "didn't do anything" for that color scheme. Here is the code to fill the pie chart:

@Override
public void loadPieChart(final int failedMatches, final int emptyMatches,
    final int nonEmptyMatches)
{
    final int totalInvocations = failedMatches + emptyMatches
        + nonEmptyMatches;
    final List<Data> list = new ArrayList<>(3);

    int nr;
    double percent;
    String fmt;

    /*
     * Failures
     */
    nr = failedMatches;
    percent = 100.0 * nr / totalInvocations;
    fmt = String.format("Failures (%d - %.02f%%)", nr, percent);
    list.add(new Data(fmt, percent));

    /*
     * Empty
     */
    nr = emptyMatches;
    percent = 100.0 * nr / totalInvocations;
    fmt = String.format("Empty matches (%d - %.02f%%)", nr, percent);
    list.add(new Data(fmt, percent));

    /*
     * Non empty
     */
    nr = nonEmptyMatches;
    percent = 100.0 * nr / totalInvocations;
    fmt = String.format("Non empty matches (%d; %.02f%%)", nr, percent);
    list.add(new Data(fmt, percent));

    display.matchChart.getData().setAll(list);

    fmt = String.format("Rule rundown (%d total)", totalInvocations);
    display.matchChart.setTitle(fmt);
}

Obtaining the data is not the problem, the problem is that I can't find in the JavaFX javadoc how I would display a "single graphic bar" like the above...

Where do I start?

(oh, and I suck at graphics so don't even ask me to "draw" what i want; if more precisions are needed I'll happily give them)

---

EDIT OK, here is an example of what I mean:

http://www.highcharts.com/demo/bar-stacked

Except that I only need one bar, I don't care about popup menus, I don't want the axes, I don't want the legend, I only want the bare, no frills bar.

Since then I have also modified the output a little:

The goal would be to replace the last column with that darned graphic which I don't know how to generate :(

解决方案

import javafx.application.Application;
import javafx.beans.property.ReadOnlyObjectWrapper;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.control.TableCell;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.layout.HBox;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

public class TableBar extends Application {
    public static void main(String[] args) { launch(args); }

    @Override
    public void start(Stage stage) {
        ObservableList<Data> data = FXCollections.observableArrayList();
        for (int i = 0; i<10; i++) data.add(new Data());

        TableView<Data> tv = new TableView(data);
        TableColumn<Data, Number> col1 = new TableColumn("num1");
        TableColumn<Data, Number> col2 = new TableColumn("num2");
        col1.setCellValueFactory((p)->{return p.getValue().num1;});
        col2.setCellValueFactory((p)->{return p.getValue().num2;});

        //make this column hold the entire Data object so we can access all fields
        TableColumn<Data, Data> col3 = new TableColumn("bar");
        col3.setPrefWidth(100);
        col3.setCellValueFactory((p)->{return new ReadOnlyObjectWrapper<>(p.getValue());});
        col3.setCellFactory((TableColumn<Data, Data> param) -> {
            return new TableCell<Data, Data>(){

                @Override
                protected void updateItem(Data item, boolean empty) {
                    super.updateItem(item, empty);
                    if (empty) setGraphic (null);
                    else {
                        double tot = item.num1.get() + item.num2.get();
                        double ratio1 = item.num1.get() / tot;
                        double ratio2 = item.num2.get() / tot;

                        Rectangle r1 = new Rectangle();
                        //the param is the column, bind so rects resize with column
                        r1.widthProperty().bind(param.widthProperty().multiply(ratio1));
                        r1.heightProperty().bind(this.getTableRow().heightProperty().multiply(0.5));
                        r1.setStyle("-fx-fill:#f3622d;");
                        Rectangle r2 = new Rectangle(0, 20);
                        r2.widthProperty().bind(param.widthProperty().multiply(ratio2));
                        r2.setStyle("-fx-fill:#fba71b;");

                        HBox hbox = new HBox(r1,r2);
                        hbox.setAlignment(Pos.CENTER_LEFT);
                        setGraphic(hbox);
                        setText(null);
                    }
                }

            };
        });

        tv.getColumns().addAll(col1,col2,col3);
        Scene scene = new Scene(tv);

        stage.setScene(scene);
        stage.show();
    }

    class Data{
        private SimpleIntegerProperty num1 = new SimpleIntegerProperty((int)(Math.random()*1000));
        private SimpleIntegerProperty num2 = new SimpleIntegerProperty((int)(Math.random()*1000));

        public SimpleIntegerProperty num1Property(){return num1;}
        public SimpleIntegerProperty num2Property(){return num2;}
    }
}

I just realized there's supposed to be 3 numbers, but I'm sure you get the idea.

这篇关于如何显示“单个条形图”在TableView（javaFX 8）的TableColumn中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！