Question

我一直在使用this javascript library在网页上创建树形图，效果很好。现在的问题是我需要将它包含在我在服务器端生成的powerpoint演示文稿中（我使用aspose.slides for .net生成powerpoint）

我想到的最简单的事情是尝试以某种方式在服务器上构建树形图并保存为图像（因为将图像添加到powerpoint演示文稿中非常简单）但在谷歌搜索后，我看不到任何图像来自C＃serverside的解决方案可以生成树形图作为图像。

在我可以从服务器端C＃app创建树形图作为图像的地方存在这样的事情。

Answer 1

鉴于算法已知，使用树形图绘制位图并不困难。目前我没有足够的时间自己编写代码，但我有足够的时间（几乎）盲目地将一些现有代码移植到C＃:)让我们采用this javascript实现。它使用this论文中描述的算法。我在该实现中发现了一些问题，这些问题已在C＃版本中修复。 Javascript版本适用于整数的纯数组（以及数组数组的数组）。我们定义了一些类：

public class TreemapItem {
    private TreemapItem() {
        FillBrush = Brushes.White;
        BorderBrush = Brushes.Black;
        TextBrush = Brushes.Black;
    }

    public TreemapItem(string label, int area, Brush fillBrush) : this() {
        Label = label;
        Area = area;
        FillBrush = fillBrush;
        Children = null;
    }

    public TreemapItem(params TreemapItem[] children) : this() {
        // in this implementation if there are children - all other properies are ignored
        // but this can be changed in future
        Children = children;
    }

    // Label to write on rectangle
    public string Label { get; set; }
    // color to fill rectangle with
    public Brush FillBrush { get; set; }
    // color to fill rectangle border with
    public Brush BorderBrush { get; set; }
    // color of label
    public Brush TextBrush { get; set; }
    // area
    public int Area { get; set; }
    // children
    public TreemapItem[] Children { get; set; }
}

然后开始移植。 First Container类：

class Container {
    public Container(int x, int y, int width, int height) {
        X = x;
        Y = y;
        Width = width;
        Height = height;
    }

    public int X { get; }
    public int Y { get; }
    public int Width { get; }
    public int Height { get; }

    public int ShortestEdge => Math.Min(Width, Height);

    public IDictionary<TreemapItem, Rectangle> GetCoordinates(TreemapItem[] row) {
        // getCoordinates - for a row of boxes which we've placed 
        //                  return an array of their cartesian coordinates
        var coordinates = new Dictionary<TreemapItem, Rectangle>();
        var subx = this.X;
        var suby = this.Y;
        var areaWidth = row.Select(c => c.Area).Sum()/(float) Height;
        var areaHeight = row.Select(c => c.Area).Sum()/(float) Width;
        if (Width >= Height) {
            for (int i = 0; i < row.Length; i++) {
                var rect = new Rectangle(subx, suby, (int) (areaWidth), (int) (row[i].Area/areaWidth));
                coordinates.Add(row[i], rect);
                suby += (int) (row[i].Area/areaWidth);
            }
        }
        else {
            for (int i = 0; i < row.Length; i++) {
                var rect = new Rectangle(subx, suby, (int) (row[i].Area/areaHeight), (int) (areaHeight));
                coordinates.Add(row[i], rect);
                subx += (int) (row[i].Area/areaHeight);
            }
        }
        return coordinates;
    }

    public Container CutArea(int area) {
        // cutArea - once we've placed some boxes into an row we then need to identify the remaining area, 
        //           this function takes the area of the boxes we've placed and calculates the location and
        //           dimensions of the remaining space and returns a container box defined by the remaining area
        if (Width >= Height) {
            var areaWidth = area/(float) Height;
            var newWidth = Width - areaWidth;                
            return new Container((int) (X + areaWidth), Y, (int) newWidth, Height);
        }
        else {
            var areaHeight = area/(float) Width;
            var newHeight = Height - areaHeight;                
            return new Container(X, (int) (Y + areaHeight), Width, (int) newHeight);
        }
    }
}

然后构建实际Treemap

的Bitmap类

public class Treemap {
    public Bitmap Build(TreemapItem[] items, int width, int height) {
        var map = BuildMultidimensional(items, width, height, 0, 0);            
        var bmp = new Bitmap(width, height);

        var g = Graphics.FromImage(bmp);
        g.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAliasGridFit;
        foreach (var kv in map) {
            var item = kv.Key;
            var rect = kv.Value;
            // fill rectangle
            g.FillRectangle(item.FillBrush, rect);
            // draw border
            g.DrawRectangle(new Pen(item.BorderBrush, 1), rect);
            if (!String.IsNullOrWhiteSpace(item.Label)) {
                // draw text
                var format = new StringFormat();
                format.Alignment = StringAlignment.Center;
                format.LineAlignment = StringAlignment.Center;
                var font = new Font("Arial", 16);
                g.DrawString(item.Label, font, item.TextBrush, new RectangleF(rect.X, rect.Y, rect.Width, rect.Height), format);
            }
        }
        return bmp;
    }

    private Dictionary<TreemapItem, Rectangle> BuildMultidimensional(TreemapItem[] items, int width, int height, int x, int y) {
        var results = new Dictionary<TreemapItem, Rectangle>();
        var mergedData = new TreemapItem[items.Length];
        for (int i = 0; i < items.Length; i++) {
            // calculate total area of children - current item's area is ignored
            mergedData[i] = SumChildren(items[i]);
        }
        // build a map for this merged items (merged because their area is sum of areas of their children)                
        var mergedMap = BuildFlat(mergedData, width, height, x, y);
        for (int i = 0; i < items.Length; i++) {
            var mergedChild = mergedMap[mergedData[i]];
            // inspect children of children in the same way
            if (items[i].Children != null) {
                var headerRect = new Rectangle(mergedChild.X, mergedChild.Y, mergedChild.Width, 20);
                results.Add(mergedData[i], headerRect);
                // reserve 20 pixels of height for header
                foreach (var kv in BuildMultidimensional(items[i].Children, mergedChild.Width, mergedChild.Height - 20, mergedChild.X, mergedChild.Y + 20)) {
                    results.Add(kv.Key, kv.Value);
                }
            }
            else {
                results.Add(mergedData[i], mergedChild);
            }
        }
        return results;
    }

    private Dictionary<TreemapItem, Rectangle> BuildFlat(TreemapItem[] items, int width, int height, int x, int y) {
        // normalize all area values for given width and height
        Normalize(items, width*height);
        var result = new Dictionary<TreemapItem, Rectangle>();
        Squarify(items, new TreemapItem[0], new Container(x, y, width, height), result);
        return result;
    }

    private void Normalize(TreemapItem[] data, int area) {
        var sum = data.Select(c => c.Area).Sum();
        var multi = area/(float) sum;
        foreach (var item in data) {
            item.Area = (int) (item.Area*multi);
        }
    }

    private void Squarify(TreemapItem[] data, TreemapItem[] currentRow, Container container, Dictionary<TreemapItem, Rectangle> stack) {
        if (data.Length == 0) {
            foreach (var kv in container.GetCoordinates(currentRow)) {
                stack.Add(kv.Key, kv.Value);
            }
            return;
        }
        var length = container.ShortestEdge;
        var nextPoint = data[0];            
        if (ImprovesRatio(currentRow, nextPoint, length)) {
            currentRow = currentRow.Concat(new[] {nextPoint}).ToArray();
            Squarify(data.Skip(1).ToArray(), currentRow, container, stack);
        }
        else {
            var newContainer = container.CutArea(currentRow.Select(c => c.Area).Sum());
            foreach (var kv in container.GetCoordinates(currentRow)) {
                stack.Add(kv.Key, kv.Value);
            }
            Squarify(data, new TreemapItem[0], newContainer, stack);
        }
    }

    private bool ImprovesRatio(TreemapItem[] currentRow, TreemapItem nextNode, int length) {
        // if adding nextNode 
        if (currentRow.Length == 0)
            return true;
        var newRow = currentRow.Concat(new[] {nextNode}).ToArray();
        var currentRatio = CalculateRatio(currentRow, length);
        var newRatio = CalculateRatio(newRow, length);
        return currentRatio >= newRatio;
    }

    private int CalculateRatio(TreemapItem[] row, int length) {
        var min = row.Select(c => c.Area).Min();
        var max = row.Select(c => c.Area).Max();
        var sum = row.Select(c => c.Area).Sum();
        return (int) Math.Max(Math.Pow(length, 2)*max/Math.Pow(sum, 2), Math.Pow(sum, 2)/(Math.Pow(length, 2)*min));
    }

    private TreemapItem SumChildren(TreemapItem item) {
        int total = 0;
        if (item.Children?.Length > 0) {
            total += item.Children.Sum(c => c.Area);
            foreach (var child in item.Children) {
                total += SumChildren(child).Area;
            }
        }
        else {
            total = item.Area;
        }
        return new TreemapItem(item.Label, total, item.FillBrush);
    }
}

现在让我们尝试使用它，看看它是怎么回事：

var map = new[] {
    new TreemapItem("ItemA", 0, Brushes.DarkGray) {
        Children = new[] {
            new TreemapItem("ItemA-1", 200, Brushes.White),
            new TreemapItem("ItemA-2", 500, Brushes.BurlyWood),
            new TreemapItem("ItemA-3", 600, Brushes.Purple),
        }
     },
    new TreemapItem("ItemB", 1000, Brushes.Yellow) {
    },
    new TreemapItem("ItemC", 0, Brushes.Red) {
        Children = new[] {
            new TreemapItem("ItemC-1", 200, Brushes.White),
            new TreemapItem("ItemC-2", 500, Brushes.BurlyWood),
            new TreemapItem("ItemC-3", 600, Brushes.Purple),
        }
    },
    new TreemapItem("ItemD", 2400, Brushes.Blue) {
    },
    new TreemapItem("ItemE", 0, Brushes.Cyan) {
        Children = new[] {
            new TreemapItem("ItemE-1", 200, Brushes.White),
            new TreemapItem("ItemE-2", 500, Brushes.BurlyWood),
            new TreemapItem("ItemE-3", 600, Brushes.Purple),
        }
    },
};
using (var bmp = new Treemap().Build(map, 1024, 1024)) {
    bmp.Save("output.bmp", ImageFormat.Bmp);
}

输出：

这可以通过多种方式进行扩展，并且可以显着提高代码质量。但如果你这样做，它至少可以给你一个良好的开端。好处是它快速且不涉及外部依赖性。如果你想使用它并找到一些问题或者它不符合你的一些要求 - 随意提问，我会在有更多时间时改进它。

Answer 2

使用GDI + api可能是您唯一的选择，并提供跨平台的良好支持。但是，在服务器端使用GDI +执行任何操作时，需要注意几个潜在的问题。值得一读，因为它解释了DotNet中绘制图形的当前状态，并对服务器端处理有一点意见：

https://github.com/imazen/Graphics-vNext

说完了;这篇文章涉及你要求的内容：

OutOfMemory Exception when recursively drawing rectangles in GDI+（它特别谈到用GDI +生成TreeMap，如果你阅读了评论并回答你，那么就会避免很多陷阱）

一旦您生成了图像，将其保存到某个位置的磁盘是一个简单的过程，然后希望将其嵌入到您的演示文稿中;您也可以选择写入流，因此可以直接将其嵌入到powerpoint文件中，而无需先将其保存到磁盘。

Answer 3

埃因霍温科技大学发布了a paper关于方形树图算法的文章。 Pascal Laurin已将此转变为C＃。还有一个Code Project article，其中有一个关于树图的部分。

当然还有商业解决方案，例如.NET Charting，Infragistics或Telerik。这些的缺点可能是它们被设计为需要绘制的控件，因此您可能需要某种UI线程。

还有一个问题here on Stack Overflow已经要求在C＃中实现树形图。万一你不记得了。

Answer 4

由于您已经在生成所有内容的JS和HTML版本，因此您可能需要检查的一件事是：

http://www.nrecosite.com/html_to_image_generator_net.aspx

我使用它直接从我生成的页面生成高分辨率报告。它使用WKHTML来渲染它，你可以传递大量参数来真正微调它。它对大多数事物都是免费的，而且效果很好。多线程是一种痛苦的屁股，但我没有碰到很多问题。如果你使用NRECO PDf库，你甚至可以做批量的东西。

有了这一切你需要做的就是渲染你已经存在的页面，通过库管道并插入你的PPT，一切都应该是好的。

Answer 5

由于您需要做的只是提取网页的屏幕截图，因此将网页捕获为图像会更方便。

This免费库能够从您的网页中提取屏幕截图，并且它支持Javascript / CSS。

Answer 6

我基于 WPF 中关于树形图的project基于以下解决方案。

使用链接中的数据，您可以定义模型（仅使用必要的数据），如下所示：

class Data
{
    [JsonProperty("$area")]
    public float Area { get; set; }

    [JsonProperty("$color")]
    public Color Color { get; set; }
}

class Item
{
    public string Name { get; set; }
    public Data Data { get; set; }
    public IEnumerable<Item> Children { get; set; }

    internal TreeMapData TMData { get; set; }

    internal int GetDepth()
    {
        return Children.Select(c => c.GetDepth()).DefaultIfEmpty().Max() + 1;
    }
}

使用解决方案中使用的某些值添加额外的属性TreeMapData：

class TreeMapData
{
    public float Area { get; set; }
    public SizeF Size { get; set; }
    public PointF Location { get; set; }
}

现在，使用以下公共成员定义TreeMap类：

class TreeMap
{
    public IEnumerable<Item> Items { get; private set; }

    public TreeMap(params Item[] items) : 
        this(items.AsEnumerable()) { }

    public TreeMap(IEnumerable<Item> items)
    {
        Items = items.OrderByDescending(t => t.Data.Area).ThenByDescending(t => t.Children.Count());
    }

    public Bitmap Draw(int width, int height)
    {
        var bmp = new Bitmap(width + 1, height + 1);
        using (var g = Graphics.FromImage(bmp))
        {
            DrawIn(g, 0, 0, width, height);
            g.Flush();
        }

        return bmp;
    }

    //Private members
}

所以，你可以像这样使用它：

var treeMap = new TreeMap(items);
var bmp = treeMap.Draw(1366, 768);

私人/帮助成员：

private RectangleF emptyArea;

private void DrawIn(Graphics g, float x, float y, float width, float height)
{
    Measure(width, height);

    foreach (var item in Items)
    {
        var sFormat = new StringFormat
        {
            Alignment = StringAlignment.Center,
            LineAlignment = StringAlignment.Center
        };

        if (item.Children.Count() > 0)
        {
            g.FillRectangle(Brushes.DimGray, x + item.TMData.Location.X, y + item.TMData.Location.Y, item.TMData.Size.Width, 15);
            g.DrawString(item.Name, SystemFonts.DefaultFont, Brushes.LightGray, new RectangleF(x + item.TMData.Location.X, y + item.TMData.Location.Y, item.TMData.Size.Width, 15), sFormat);

            var treeMap = new TreeMap(item.Children);
            treeMap.DrawIn(g, x + item.TMData.Location.X, y + item.TMData.Location.Y + 15, item.TMData.Size.Width, item.TMData.Size.Height - 15);
        }
        else
        {                    
            g.FillRectangle(new SolidBrush(item.Data.Color), x + item.TMData.Location.X, y + item.TMData.Location.Y, item.TMData.Size.Width, item.TMData.Size.Height);
            g.DrawString(item.Name, SystemFonts.DefaultFont, Brushes.Black, new RectangleF(x + item.TMData.Location.X, y + item.TMData.Location.Y, item.TMData.Size.Width, item.TMData.Size.Height), sFormat);
        }

        var pen = new Pen(Color.Black, item.GetDepth() * 1.5f);
        g.DrawRectangle(pen, x + item.TMData.Location.X, y + item.TMData.Location.Y, item.TMData.Size.Width, item.TMData.Size.Height);
    }

    g.Flush();
}

private void Measure(float width, float height)
{
    emptyArea = new RectangleF(0, 0, width, height);

    var area = width * height;
    var sum = Items.Sum(t => t.Data.Area + 1);

    foreach (var item in Items)
    {
        item.TMData = new TreeMapData();
        item.TMData.Area = area * (item.Data.Area + 1) / sum;
    }

    Squarify(Items, new List<Item>(), ShortestSide());

    foreach (var child in Items)
        if (!IsValidSize(child.TMData.Size))
            child.TMData.Size = new Size(0, 0);
}

private void Squarify(IEnumerable<Item> items, IEnumerable<Item> row, float sideLength)
{
    if (items.Count() == 0)
    {
        ComputeTreeMaps(row);
        return;
    }

    var item = items.First();
    List<Item> row2 = new List<Item>(row);
    row2.Add(item);

    List<Item> items2 = new List<Item>(items);
    items2.RemoveAt(0);

    float worst1 = Worst(row, sideLength);
    float worst2 = Worst(row2, sideLength);

    if (row.Count() == 0 || worst1 > worst2)
        Squarify(items2, row2, sideLength);
    else
    {
        ComputeTreeMaps(row);
        Squarify(items, new List<Item>(), ShortestSide());
    }
}

private void ComputeTreeMaps(IEnumerable<Item> items)
{
    var orientation = this.GetOrientation();

    float areaSum = 0;

    foreach (var item in items)
        areaSum += item.TMData.Area;

    RectangleF currentRow;
    if (orientation == RowOrientation.Horizontal)
    {
        currentRow = new RectangleF(emptyArea.X, emptyArea.Y, areaSum / emptyArea.Height, emptyArea.Height);
        emptyArea = new RectangleF(emptyArea.X + currentRow.Width, emptyArea.Y, Math.Max(0, emptyArea.Width - currentRow.Width), emptyArea.Height);
    }
    else
    {
        currentRow = new RectangleF(emptyArea.X, emptyArea.Y, emptyArea.Width, areaSum / emptyArea.Width);
        emptyArea = new RectangleF(emptyArea.X, emptyArea.Y + currentRow.Height, emptyArea.Width, Math.Max(0, emptyArea.Height - currentRow.Height));
    }

    float prevX = currentRow.X;
    float prevY = currentRow.Y;

    foreach (var item in items)
    {
        var rect = GetRectangle(orientation, item, prevX, prevY, currentRow.Width, currentRow.Height);

        item.TMData.Size = rect.Size;
        item.TMData.Location = rect.Location;

        ComputeNextPosition(orientation, ref prevX, ref prevY, rect.Width, rect.Height);
    }
}

private RectangleF GetRectangle(RowOrientation orientation, Item item, float x, float y, float width, float height)
{
    if (orientation == RowOrientation.Horizontal)
        return new RectangleF(x, y, width, item.TMData.Area / width);
    else
        return new RectangleF(x, y, item.TMData.Area / height, height);
}

private void ComputeNextPosition(RowOrientation orientation, ref float xPos, ref float yPos, float width, float height)
{
    if (orientation == RowOrientation.Horizontal)
        yPos += height;
    else
        xPos += width;
}

private RowOrientation GetOrientation()
{
    return emptyArea.Width > emptyArea.Height ? RowOrientation.Horizontal : RowOrientation.Vertical;
}

private float Worst(IEnumerable<Item> row, float sideLength)
{
    if (row.Count() == 0) return 0;

    float maxArea = 0;
    float minArea = float.MaxValue;
    float totalArea = 0;

    foreach (var item in row)
    {
        maxArea = Math.Max(maxArea, item.TMData.Area);
        minArea = Math.Min(minArea, item.TMData.Area);
        totalArea += item.TMData.Area;
    }

    if (minArea == float.MaxValue) minArea = 0;

    float val1 = (sideLength * sideLength * maxArea) / (totalArea * totalArea);
    float val2 = (totalArea * totalArea) / (sideLength * sideLength * minArea);
    return Math.Max(val1, val2);
}

private float ShortestSide()
{
    return Math.Min(emptyArea.Width, emptyArea.Height);
}

private bool IsValidSize(SizeF size)
{
    return (!size.IsEmpty && size.Width > 0 && size.Width != float.NaN && size.Height > 0 && size.Height != float.NaN);
}

private enum RowOrientation
{
    Horizontal,
    Vertical
}

最后，要解析并绘制示例中的 json ，我正在这样做：

var json = File.ReadAllText(@"treemap.json");
var items = JsonConvert.DeserializeObject<Item>(json);

var treeMap = new TreeMap(items);
var bmp = treeMap.Draw(1366, 768);

bmp.Save("treemap.png", ImageFormat.Png);

结果图片：

实际上我不知道以下是否可以帮助您，因为您没有使用 vsto ，并且在评论中可能是一个不可思议的想法。

从 Office 2016 开始，树形图以图表形式合并。您可以阅读this，了解如何从 Excel 中的数据集创建树图。

因此，您可以在 Excel 中生成图表并将其传递给 PowerPoint ：

//Start an hidden excel application
var appExcel = new Excel.Application { Visible = false }; 
var workbook = appExcel.Workbooks.Add();
var sheet = workbook.ActiveSheet;

//Generate some random data
Random r = new Random();
for (int i = 1; i <= 10; i++)
{
    sheet.Cells[i, 1].Value2 = ((char)('A' + i - 1)).ToString();
    sheet.Cells[i, 2].Value2 = r.Next(1, 20);
}

//Select the data to use in the treemap
var range = sheet.Cells.Range["A1", "B10"];
range.Select();
range.Activate();

//Generate the chart
var shape = sheet.Shapes.AddChart2(-1, (Office.XlChartType)117, 200, 25, 300, 300, null);
shape.Chart.ChartTitle.Caption = "Generated TreeMap Chart";

//Copy the chart
shape.Copy();

appExcel.Quit();

//Start a Powerpoint application
var appPpoint = new Point.Application { Visible = Office.MsoTriState.msoTrue };            
var presentation = appPpoint.Presentations.Add();

//Add a blank slide
var master = presentation.SlideMaster;
var slide = presentation.Slides.AddSlide(1, master.CustomLayouts[7]);

//Paste the treemap
slide.Shapes.Paste();

幻灯片中的树形图表：

您可以使用第一部分（ Excel 部分）生成树形图并使用您所说的工具粘贴图表，或者使用生成的图表保存 Powerpoint 文件在 VSTO 中，然后使用该工具打开它。

这样做的好处是这些对象不仅仅是图像的真实图表，因此您可以轻松地更改或添加颜色，样式和效果。

从C＃服务器端，无论如何生成树形图并保存为图像？

6 个答案: