WPF条形图如何在条形图之间添加空格？

Posted 2021-04-15

我正在使用Telerik（RadPieChart）和WPF。我想要做的是在栏之间添加一个小空间。我不是在问这个系列之间的空间，因为它已经可以使用，而是关于这些系列之间的较小空间，正如下面的图像示例所示。

这就是我现在拥有的：

这就是我希望我的条形图看起来像它们之间的小空间：

这是我的源代码：

private BarSeries CreateBarSeries(KeyValuePair<ChartSerie, List<ChartDataPoint>> chartSeries, ChartLegendSettings legendSettings, int colorPaletteIndex)
    {
        var isStackMode = chartSeries.Key.CombineMode == SeriesCombineMode.Stack;
        var barSerie = new BarSeries()
        {
            VerticalAxis   = CreateMultipleVerticalAxis(chartSeries, colorPaletteIndex, out var multipleVerticalAxis) ? multipleVerticalAxis : null,
            LegendSettings = legendSettings,
            StackGroupKey  = chartSeries.Key.Group,
            Opacity        = 0.8,
            ZIndex         = 120,

            CombineMode = string.IsNullOrEmpty(chartSeries.Key.Group)
                              ? ChartSeriesCombineMode.Cluster
                              : (isStackMode ? ChartSeriesCombineMode.Stack : ChartSeriesCombineMode.Stack100),
            // start animations
            //PointAnimation = new ChartMoveAnimation()
            //{
            //    MoveAnimationType = MoveAnimationType.Bottom,
            //    Duration          = new TimeSpan(0, 0, 0, 0, 600),
            //    Delay             = new TimeSpan(0, 0, 0, 0, 155),
            //    //Easing = new ElasticEase()
            //    //{
            //    //    EasingMode = EasingMode.EaseOut,
            //    //},
            //},
            LabelDefinitions =
            {
                // set the clarion format for the labels
                new ChartSeriesLabelDefinition()
                {
                    Template = new DataTemplate()
                    {
                        VisualTree = GetSeriesFormat(chartSeries),
                    }
                }
            }
        };

        // this is the color of bar series
        if (chartSeries.Key.ColorHex != null)
        {
            Style style = new Style(typeof(Border));
            style.Setters.Add(new Setter(Border.BackgroundProperty, (SolidColorBrush)(new BrushConverter().ConvertFrom(chartSeries.Key.ColorHex))));
            barSerie.DefaultVisualStyle = style;
        }

        foreach (ChartDataPoint serie in chartSeries.Value)
        {
            barSerie.DataPoints.Add(new CategoricalDataPoint()
            {
                Category = serie.XPoint.Label,
                Value    = (double?)serie.Value,
            });
        }

        return barSerie;
    }

---

答案：

由于某些原因，在其中一个答案中建议将BorderThickness添加到样式中并没有成功，尽管BorderThicknes应该是解决方案。所以我添加了一个带有VisualTree的PointTemplate，在那里我定义了BorderThickness。现在它工作得很好。

 private BarSeries CreateBarSeries(KeyValuePair<ChartSerie, List<ChartDataPoint>> chartSeries, ChartLegendSettings legendSettings, int colorPaletteIndex)
    {
        var seriesPredefinedColor = this.ChartBase.Palette.GlobalEntries[colorPaletteIndex].Fill;

        FrameworkElementFactory borderFramework = new FrameworkElementFactory(typeof(Border));
        borderFramework.SetValue(Border.BackgroundProperty, ColorService.BrushFromHex(chartSeries.Key.ColorHex) ?? seriesPredefinedColor);
        borderFramework.SetValue(Border.OpacityProperty, 0.8D);
        borderFramework.SetValue(Border.BorderThicknessProperty, new Thickness(2));
        borderFramework.AddHandler(Border.MouseEnterEvent, new MouseEventHandler((sender, args) =>
                                                                                 {
                                                                                     var seriesBorder = (Border)sender;
                                                                                     //seriesBorder.BorderBrush = new SolidColorBrush(Colors.Black);
                                                                                     //seriesBorder.BorderThickness = new Thickness(1);
                                                                                     seriesBorder.Opacity = 1;
                                                                                 }));

        borderFramework.AddHandler(Border.MouseLeaveEvent, new MouseEventHandler((sender, args) =>
                                                                                 {
                                                                                     var seriesBorder = (Border)sender;
                                                                                     //seriesBorder.BorderBrush = new SolidColorBrush(Colors.Black);
                                                                                     //seriesBorder.BorderThickness= new Thickness(1);
                                                                                     seriesBorder.Opacity = 0.8;
                                                                                 }));

        var isStackMode = chartSeries.Key.CombineMode == SeriesCombineMode.Stack;
        var barSerie = new BarSeries()
        {
            VerticalAxis   = CreateMultipleVerticalAxis(chartSeries, colorPaletteIndex, out var multipleVerticalAxis) ? multipleVerticalAxis : null,
            LegendSettings = legendSettings,
            StackGroupKey  = chartSeries.Key.Group,
            ZIndex         = 120,
            IsHitTestVisible = true,
            CombineMode = string.IsNullOrEmpty(chartSeries.Key.Group)
                              ? ChartSeriesCombineMode.Cluster
                              : (isStackMode ? ChartSeriesCombineMode.Stack : ChartSeriesCombineMode.Stack100),
            // start animations
            //PointAnimation = new ChartMoveAnimation()
            //{
            //    MoveAnimationType = MoveAnimationType.Bottom,
            //    Duration          = new TimeSpan(0, 0, 0, 0, 600),
            //    Delay             = new TimeSpan(0, 0, 0, 0, 155),
            //    //Easing = new ElasticEase()
            //    //{
            //    //    EasingMode = EasingMode.EaseOut,
            //    //},
            //},
            LabelDefinitions =
            {
                // set the clarion format for the labels
                new ChartSeriesLabelDefinition()
                {
                    Template = new DataTemplate()
                    {
                        VisualTree = GetSeriesFormat(chartSeries),
                    }
                }
            },
            PointTemplate = new DataTemplate()
            {
                VisualTree = borderFramework,
            }
        };

        // this is the color of bar series
        //if (chartSeries.Key.ColorHex != null)
        //{
        //    Style style = new Style(typeof(Border));
        //    style.Setters.Add(new Setter(Border.BackgroundProperty, (SolidColorBrush)(new BrushConverter().ConvertFrom(chartSeries.Key.ColorHex))));
        //    barSerie.DefaultVisualStyle = style;
        //}

        foreach (ChartDataPoint serie in chartSeries.Value)
        {
            barSerie.DataPoints.Add(new CategoricalDataPoint()
            {
                Category = serie.XPoint.Label,
                Value    = (double?)serie.Value,
            });
        }

        return barSerie;
    }

答案

设置BorderThickness的DefaultVisualStyle的BarSeries属性：

// this is the color of bar series
if (chartSeries.Key.ColorHex != null)
{
    Style style = new Style(typeof(Border));
    style.Setters.Add(new Setter(Border.BackgroundProperty, (SolidColorBrush)(new BrushConverter().ConvertFrom(chartSeries.Key.ColorHex))));
    style.Setters.Add(new Setter(Border.BorderThicknessProperty, new Thickness(2.0)));
    barSerie.DefaultVisualStyle = style;
}

另一答案

你看看这个吗？似乎默认是0意味着占据所有空间

Scale.SpacingSlotCount属性确定每个类别槽位于DataPoints周围的空间槽数，相对于DataPoint槽的宽度进行测量：Empty Space = SpacingSlotCount * DataPoint_SlotWidth命名空间：Telerik.Reporting程序集：Telerik.Reporting（在Telerik.Reporting中） .dll）版本：12.1.18.816（12.1.18.816）