MS图表控制:在图表区域绘制和标记线系列

时间:2011-07-15 23:53:33

标签: c# asp.net charts data-visualization dundas

我对MS ASP.NET图表控件有疑问。

  1. 如何在条形系列上设置线系列,使其延伸到图表的y轴?
  2. 是否可以将折线系列的名称(即“目标”)放在图表的右侧,作为在图例中包含此系列的替代品?
  3. 正如您在下面的屏幕截图中看到的那样,我在条形图系列的顶部有一个系列,它不会延伸到图表的y轴。

    enter image description here

    代码如下:

    var data1 = new Dictionary<string, float>
    {
        { "W1", 80},
        { "W2", 60},
        { "W3", 40},
        { "W4", 20},
        { "W5", 10}
    };
    var data2 = new Dictionary<string, float>
    {
        { "W1", 10},
        { "W2", 10},
        { "W3", 0},
        { "W4", 10},
        { "W5", 10}
    };
    var data3 = new Dictionary<string, float>
    {
        { "W1", 10},
        { "W2", 30},
        { "W3", 50},
        { "W4", 70},
        { "W5", 80}
    };
    var data4 = new Dictionary<string, float>
    {
        { "W1", 50},
        { "W2", 50},
        { "W3", 50},
        { "W4", 50},
        { "W5", 50}
    };
    
    var chart = new Chart();
    chart.Height = Unit.Pixel(300);
    chart.Width = Unit.Pixel(450);
    chart.Legends.Add("Legend").Alignment = StringAlignment.Center;
    chart.Palette = ChartColorPalette.None;
    chart.PaletteCustomColors = new Color[] { Color.FromArgb(191, 214, 151), Color.FromArgb(249, 255, 149), Color.FromArgb(191, 79, 75), Color.Green };
    
    var area = new ChartArea();
    area.AxisX.MajorGrid.LineColor = Color.Transparent;
    chart.ChartAreas.Add(area);
    
    var series1 = new Series("Done");
    foreach (var item in data1)
    {
        series1.Points.AddXY(item.Key, item.Value);
    }
    series1.MarkerBorderWidth = 1;
    
    var series2 = new Series("In Progress");
    foreach (var item in data2)
    {
        series2.Points.AddXY(item.Key, item.Value);
    }
    
    var series3 = new Series("Needs Review");
    foreach (var item in data3)
    {
        series3.Points.AddXY(item.Key, item.Value);
    }
    
    var series4 = new Series("Goal");
    foreach (var item in data4)
    {
        series4.Points.AddXY(item.Key, item.Value);
    }
    series4.ChartType = SeriesChartType.Line;
    series4.BorderWidth = 2;
    
    series1.ChartType = series2.ChartType = series3.ChartType = SeriesChartType.StackedColumn;
    series1.Font = series2.Font = series3.Font = series4.Font = new Font("Verdana", 8.25f, FontStyle.Regular);
    
    chart.Series.Add(series1);
    chart.Series.Add(series2);
    chart.Series.Add(series3);
    chart.Series.Add(series4);
    

    感谢您的帮助。


    更新:
    当我继续寻找合适的解决方案时,我为“目标”系列实现了一个额外的图表,意图是:

    • 将此新图表的某些属性的颜色设置为透明
    • 将此图表放在现有图表的顶部

    这种方法通过在条形系列上显示“目标”线系列并允许“目标”线系列延伸到y轴来提供正确的显示。但它禁用了现有图表上条形图系列的工具提示和单击操作。由于这种用户体验不足,这种方法不是一种合适的解决方案。

    继续寻找解决方案......

1 个答案:

答案 0 :(得分:0)

问题1:

另一种方法是使用PostPaint事件,您可以在图表的任何位置绘制任何您想要的内容......但是您仍然会丢失工具提示和此行的交互式功能。

对于你的问题2:

您可以从图例项集合中排除不需要的图例条目;您可以自定义图例,就像这样做:

yourChart.CustomizeLegend += new EventHandler<CustomizeLegendEventArgs> (CustomizeLegendEventHandler);
//...
static void CustomizeLegendEventHandler(object sender, CustomizeLegendEventArgs e)
{
  int anotherIndex = 3;
  if (sender != null && sender is Chart)
  {
    if (e != null && e.LegendItems != null && e.LegendItems.Count > 0)
    {
      Chart ch = ((Chart)sender);
      if (...) //your logic here
      {
        //example: you can move a legend item from one index to another here:
        LegendItem item = e.LegendItems[0];
        e.LegendItems.RemoveAt(0);
        e.LegendItems.Insert(anotherIndex, item);
      }
    }
  }
}

并且,您可以使用仅包含一个标签,一个点等的辅助Y轴或:您可以使用PostPaint事件处理程序绘制任何您想要的内容。

您可以从MS下载一个出色的可安装样本包:here。它们显示了许多可以学习的代码示例。我从这些样本中发现了这些东西,并使用了这个新的自由反射器:ILSpy

希望这有帮助。