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

戴维

我在 WPF 中使用 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 添加到 Style 并没有解决问题,尽管 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;
    }
毫米8

设置BorderThickness的属性DefaultVisualStyleBarSeries

// 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;
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

matplotlib条形图:空格键

您如何删除条形图中条形图之间零值的地方?

如何删除分组条形图之间的空格

如何在条形图的条形图中显示值?

在我的geom_histogram条形图而非条形图之间添加空间

如何在Chart.js 2中为两个不同的条形图保留条形之间的间距

如何在Vue上下文中向条形图/饼图动态添加点?

如何从分组条形图Matplotlib中删除空格

使用R base的堆叠条形图:如何在每个堆叠条形内添加值

如何分隔条形图?

如何在条形图之间添加距离线

如何在NetLogo中创建条形图,条形图并排放置

如何在条形图的每个条形上方添加一个额外的数字

如何设置条形图/条形图的颜色?

如何在条形图上正确放置条形图

图表如何在条形图上的特定条形图之间添加垂直虚线?

如何在条形图上添加图例?

Seaborn条形图条之间没有空格

如何在直方图中拆分和堆叠条形图,仅填充下部条形图?

如何在R代码中向条形图添加SE条形图?

如何在海洋条形图的每个条形图的顶部显示y值?

条形图matplotlib中的多余空格

如何在堆叠条形图中的条形上添加比率

如何在Google条形图中添加更多条形...?

MATLAB条形图:如何组合条形图?

如何分离条形图?

如何在android中实现如下所示的条形图或条形图

如何在 Altair visual 中的 Y 轴和条形图之间添加更多空间

如何在 Python 中使用 pandas 和 matplotlib 绘制条形图时删除条形之间的空间?