Question

我想制作一个带有类似于下面的prefuse的堆积区域图： http://prefuse.org/gallery/namevoyager/

我不太确定从哪里开始，并且这些图表没有示例代码。我确实找到了prefuse.action.layout.StackedAreaChart，但我不知道该如何处理它。

Answer 1

这是使用StackedAreaChart布局的可编译示例。我把它包括在这里因为我无法在其他地方找到它，希望它可以作为其他人的参考。这里的关键是要了解StackedAreaChart假定您的表遵循以下模式：

id的一列，说“name”，
与id对应的实际数据的一列或多列。
计算多边形的三列，名为“_polygon”，“_ polygon：start”和“_polygon：end”。这就是StackedAreaChart类的设计方式。 “_polygon”实际上是常量VisualItem.POLYGON，因此您可以使用它，如下例所示。

这是：

import javax.swing.JFrame;
import prefuse.Constants;
import prefuse.Display;
import prefuse.Visualization;
import prefuse.action.ActionList;
import prefuse.action.RepaintAction;
import prefuse.action.assignment.ColorAction;
import prefuse.action.assignment.DataColorAction;
import prefuse.action.layout.StackedAreaChart;
import prefuse.data.Table;
import prefuse.render.DefaultRendererFactory;
import prefuse.render.PolygonRenderer;
import prefuse.util.ColorLib;
import prefuse.visual.VisualItem;

class Main {
    public static void main(String[] args) {
        ActionList color = new ActionList();
        int[] palette = new int[] {
            ColorLib.rgba(255,200,200,150),
            ColorLib.rgba(200,255,200,150)
        };
        ColorAction fillColor = new DataColorAction("table", "name",
                Constants.NOMINAL, VisualItem.FILLCOLOR, palette);
        color.add(fillColor);

        ActionList layout = new ActionList();
        layout.add(new RepaintAction());
        String[] fields = { "1980s", "1990s", "2000s" };
        layout.add(new StackedAreaChart("table", VisualItem.POLYGON, fields));

        Visualization vis = new Visualization();
        Table table = new Table();
        vis.add("table", table);

        table.addColumn("name", String.class);
        table.addColumn("1980s", int.class);
        table.addColumn("1990s", int.class);
        table.addColumn("2000s", int.class);
        table.addColumn(VisualItem.POLYGON, float[].class, null);
        table.addColumn(VisualItem.POLYGON+":start", float[].class, null);
        table.addColumn(VisualItem.POLYGON+":end", float[].class, null);

        int rowNumber = table.addRow();
        table.setString(rowNumber, "name", "Bob");
        table.setInt(rowNumber, "1980s", 1000);
        table.setInt(rowNumber, "1990s", 500);
        table.setInt(rowNumber, "2000s", 300);

        rowNumber = table.addRow();
        table.setString(rowNumber, "name", "Mary");
        table.setInt(rowNumber, "1980s", 800);
        table.setInt(rowNumber, "1990s", 1500);
        table.setInt(rowNumber, "2000s", 3200);

        vis.putAction("layout", layout);
        vis.putAction("color", color);

        DefaultRendererFactory drf = new DefaultRendererFactory();
        drf.add("ingroup('table')", new PolygonRenderer());
        vis.setRendererFactory(drf);

        Display display = new Display(vis);
        display.setSize(720, 500);

        JFrame frame = new JFrame("Prefuse StackedAreaChart Example");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.add(display);
        frame.pack();
        frame.setVisible(true);

        vis.run("layout");
        vis.run("color");
    }
}

要让它显示轴，请参阅prefuse发行版中包含的Congress.java演示。

Answer 2

您检查了Prefuse manual吗？（不太完整，但这是开始的事情）。

在其中，您可以找到sample application，其中显示了如何在Graph元素上加载某些数据，以及如何将其部署到Visualization项目。

要生成StackedAreaChart，您需要将数据加载到prefuse.data.Table对象中，您可以通过示例从CSV文件中加载该对象：

CSVTableReader reader=new CSVTableReader();
Table myTable=reader.readTable("/myDataFile.csv");

然后，将表作为数据组添加到可视化中，即“table”

Visualization vis = new Visualization();
vis.add("table", myTable);

然后，创建StackedAreaChart，并将其添加到可视化操作集合中：

//params: name of the data group to layout, name of the data field in which to store computed polygons, and an array containing the names of the various data fields, in sorted order, that should be referenced for each consecutive point of a stack layer
StackedAreaChart chart=new StackedAreaChart ("table", fieldName, csvColumnsToCompute);
//add the layout action with a unique key
 vis.putAction("myChartLayout", chart);

然后，您可以配置各种布局操作或其他可视方面（请参阅链接示例）。

最后，为了显示图表，您必须创建一个Display对象，绑定可视化对象并在其上运行布局操作：

//this Display initialization is extracted from the Example app
Display d = new Display(vis);
d.setSize(720, 500); // set display size
// drag individual items around
d.addControlListener(new DragControl());
// pan with left-click drag on background
d.addControlListener(new PanControl()); 
// zoom with right-click drag
d.addControlListener(new ZoomControl());

// create a new window to hold the visualization
JFrame frame = new JFrame("prefuse example");
// ensure application exits when window is closed
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.add(d);
frame.pack();           // layout components in window
frame.setVisible(true); // show the window

//At the end: RUN THE CHART ACTION:
vis.run("myChartLayout");

希望这会有所帮助，至少作为第一次启动（代码片段不适用于复制粘贴，并且可能包含一些编译错误）。

祝你好运。

如何使用Prefuse制作堆积区域图表？

2 个答案: