开发者

How can I configure the coloring of a column chart?

I'm looking for a way to customize a column chart. Open office and Excel produce the following chart for a column with values 1, 2, 3, 3, 2. But, I'd like to generate a chart with the following properties.

  1. The chart should have five bars.
  2. All bars must be of the same height.
  3. The chart should color bars based on their values. In this example, the chart should use three colors because there are three different values.

If you know of any other sof开发者_StackOverflowtware package that can automatically generate such a chart, I'd be glad to try it out.

How can I configure the coloring of a column chart?


In Excel you can not do this in simple steps. The only options you have in Excel is to change the color of each column manually or vary the color by point as you can see here. I think that through VBA code you can get there.

I'd recommend the use of Microsoft ASP.NET built-in chart control. It'll give you lots of customization possibilities. I'll try to post a working sample.

Edit:

Just managed to get a working sample:

This is the aspx page code:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="WebApplication2._Default" %>

<%@ Register assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" namespace="System.Web.UI.DataVisualization.Charting" tagprefix="asp" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

    <asp:Chart ID="Chart1" runat="server" Width="300px">
    <Series>
        <asp:Series Name="Series1" ChartArea="ChartArea1" MarkerSize="1">
            <Points>
                <asp:DataPoint XValue="1" YValues="1" />
                <asp:DataPoint XValue="2" YValues="2" />
                <asp:DataPoint XValue="3" YValues="3" />
                <asp:DataPoint XValue="4" YValues="3" />
                <asp:DataPoint XValue="5" YValues="2" />
            </Points>
        </asp:Series>
    </Series>
    <ChartAreas>
        <asp:ChartArea Name="ChartArea1">
        <AxisX Interval = "1"></AxisX>
        </asp:ChartArea>
    </ChartAreas>
</asp:Chart>    

</asp:Content>

This is the code-behind code I implemented - not bullet proof because it needs more testing...

public partial class _Default : System.Web.UI.Page
{
    private static Dictionary<System.Drawing.Color, double> dictionary =
        new System.Collections.Generic.Dictionary<System.Drawing.Color, double>();

    private Color CreateRandomColor()
    {
        Random randonGen = new Random();

        Color randomColor = Color.FromArgb(randonGen.Next(255), randonGen.Next(255), randonGen.Next(255));

        return randomColor;
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        FormatChart();
    }

    private bool IsColorUsed(Color color)
    {
        return dictionary.Any(kvp => kvp.Key == color);
    }

    private void FormatChart()
    {
        foreach (var point in Chart1.Series[0].Points)
        {
            // Point with same Y value already exist?
            var sameYValue = dictionary.Any(kvp => kvp.Value == point.YValues.First());

            if (sameYValue)
            {
                //Getting the Y point...
                var yValue = dictionary.FirstOrDefault(kvp => kvp.Value == point.YValues.First());

                // Applying same color...
                point.Color = yValue.Key;
            }
            else // Different Y value
            {
                Color color = CreateRandomColor();

                // Getting a new Color that isn't used yet...
                while (IsColorUsed(color))
                {
                    color = CreateRandomColor();
                }

                point.Color = color;

                dictionary.Add(color, point.XValue);
            }
        }
    }
}

This is the resulting chart:

alt text http://www.freeimagehosting.net/uploads/22d240b0e0.png

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜