如何创建显示绑定到对象列表的百分比的条形图？

Question

使用DataVisualization.Charting.Chart控件,我需要创建一个条形图(可能是堆积条形图),向每个人显示为该人预订的小时数以及这些小时的总小时百分比.到目前为止,我对这个野兽的集合和属性的数量有点不知所措,所以我首先得到一些帮助,然后我会自己探索更多.

我需要将图表绑定到以下对象的列表:

Public Class DOHoursChartItem

    Public Property Name As String
    Public Property Hours As Double
    Public Property Percent As Double

End Class

我不确定我是否需要这里的百分比属性,支持以某种方式让图表控件处理这个并且只给它Hours每点的值和总小时值,但这就是为什么我问:我该如何设置我上面描述的图表？

Answer 1

我不是很擅长VB,所以我将开始在C#中发布一个例子(如果你真的需要,我可以尝试翻译它).

以下是三个可用于将项目绑定到mschart并获取列图表的方法示例:

示例1:单个区域和并排列

private void FillChartSingleArea()
{
    // this set the datasource
    this.chart1.DataSource = GetItems();

    // clear all the (possible) existing series
    this.chart1.Series.Clear();

    // add the hours series
    var hoursSeries = this.chart1.Series.Add("Hours");
    hoursSeries.XValueMember = "Name";
    hoursSeries.YValueMembers = "Hours";
    hoursSeries.ChartType = System.Windows.Forms.DataVisualization.Charting.SeriesChartType.Column;

    // add the percentages series
    var percSeries = this.chart1.Series.Add("Percentages");
    percSeries.XValueMember = "Name";
    percSeries.YValueMembers = "Percent";
    percSeries.ChartType = System.Windows.Forms.DataVisualization.Charting.SeriesChartType.Column;
}

示例2:两个图表一个接一个

private void FillChartDoubleArea()
{
    // this set the datasource
    this.chart1.DataSource = GetItems();

    // clear all the (possible) existing series
    this.chart1.Series.Clear();

    // clear all the existing areas and add 2 new areas
    this.chart1.ChartAreas.Clear();
    this.chart1.ChartAreas.Add("Area1");
    this.chart1.ChartAreas.Add("Area2");

    // add the hours series
    var hoursSeries = this.chart1.Series.Add("Hours");
    hoursSeries.ChartArea = "Area1";
    hoursSeries.XValueMember = "Name";
    hoursSeries.YValueMembers = "Hours";
    hoursSeries.ChartType = System.Windows.Forms.DataVisualization.Charting.SeriesChartType.Column;

    // add the percentages series
    var percSeries = this.chart1.Series.Add("Percentages");
    hoursSeries.ChartArea = "Area2";
    percSeries.XValueMember = "Name";
    percSeries.YValueMembers = "Percent";
    percSeries.ChartType = System.Windows.Forms.DataVisualization.Charting.SeriesChartType.Column;
}

示例3:单个区域和堆叠列

private void FillStackedChartSingleArea()
{
    // this set the datasource
    this.chart1.DataSource = GetItems();

    // clear all the (possible) existing series
    this.chart1.Series.Clear();

    // add the hours series
    var hoursSeries = this.chart1.Series.Add("Hours");
    hoursSeries.XValueMember = "Name";
    hoursSeries.YValueMembers = "Hours";
    hoursSeries.ChartType = System.Windows.Forms.DataVisualization.Charting.SeriesChartType.StackedColumn;

    // add the percentages series
    var percSeries = this.chart1.Series.Add("Percentages");
    percSeries.XValueMember = "Name";
    percSeries.YValueMembers = "Percent";
    percSeries.ChartType = System.Windows.Forms.DataVisualization.Charting.SeriesChartType.StackedColumn;
}

其中GetItems方法被定义如下(对于所有的例子):

private List<DOHoursChartItem> GetItems()
{
    var items = new List<DOHoursChartItem>()
    {
        new DOHoursChartItem("John", 120),
        new DOHoursChartItem("Amanda", 40),
        new DOHoursChartItem("David", 70),
        new DOHoursChartItem("Rachel", 10),
    };
    // compute the percentages
    var totalHours = items.Sum(x => x.Hours);
    foreach (var item in items)
        item.Percent = (item.Hours * 100.0) / totalHours;
    return items;
}

并DOHoursChartItem作为:

    class DOHoursChartItem
    {
        public String Name { get; set; }
        public double Hours { get; set; }
        public double Percent { get; set; }
        public DOHoursChartItem(string name, double hours)
        {
            this.Name = name;
            this.Hours = hours;
        }
    }

NB

这些实际上是柱形图; 通过将ChartType设置为Bar(或StackedBar),您将得到相同的结果,但条形将具有水平方向.