如何减少 DotNet.Highcharts 中的列系列差距

Question

我正在使用 DotNet.Highchart 库创建我的图表，我在缩小柱形图中数据系列之间的差距方面遇到了问题。这是我当前的图表：

这是我当前的柱形图代码：

DotNet.Highcharts.Highcharts AttritionByReasonBarChart = new DotNet.Highcharts.Highcharts("AttritionByReasonBarChart")
                .InitChart(new Chart { DefaultSeriesType = ChartTypes.Column, Height = 400, Width = 860, Style = "margin: '0 auto'" })
                .SetTitle(new Title { Text = "Attrition by Reason", Style = "font: 'normal 16px Verdana, sans-serif'" })
                .SetCredits(new Credits { Enabled = false })
                .SetXAxis(new XAxis
                {
                    Categories = vEmployment,
                    Labels = new XAxisLabels { Rotation = 0 }
                })
                .SetYAxis(new YAxis
                {
                    Title = new YAxisTitle
                    {
                        Text = "Employment Type",
                        Align = AxisTitleAligns.Middle
                    }
                })
                .SetPlotOptions(new PlotOptions
                {
                    Bar = new PlotOptionsBar
                    {
                        DataLabels = new PlotOptionsBarDataLabels { Enabled = true }
                    }
                })
                .SetLegend(new Legend
                {
                    Layout = Layouts.Vertical,
                    Align = HorizontalAligns.Right,
                    VerticalAlign = VerticalAligns.Middle,
                    Floating = true,
                    BorderWidth = 1,
                    BackgroundColor = new BackColorOrGradient(ColorTranslator.FromHtml("#FFFFFF")),
                    Shadow = true
                })
                .SetSeries(
                    new Series
                    { 
                        Name = "Head Count",
                        Data = new Data(vTotal)
                    });

有没有最好的方法来设置数据系列之间的差距？谢谢

Answer 1

将 PlotOptionsBar 替换为 PlotOptionsColumn 并将 PointPadding 添加到您的代码中，如下所示：

Highcharts AttritionByReasonBarChart = new Highcharts("AttritionByReasonBarChart")
            .InitChart(new Chart { DefaultSeriesType = ChartTypes.Column, Height = 400, Width = 860, Style = "margin: '0 auto'" })
            .SetTitle(new Title { Text = "Attrition by Reason", Style = "font: 'normal 16px Verdana, sans-serif'" })
            .SetCredits(new Credits { Enabled = false })
            .SetXAxis(new XAxis
            {
                Categories = new[] { "ABHFGFGETTRRD AGAGGSGSGS", "IEKHLTOTUYYT IIWWIIWEUEUEU", "KMVMVBBV DGDFEFJ", "KRJG JGJGJGT", "HAHAHSHSGD OTERETETE ET", "HAHAHA PRGDGDGDGDG DGT", "NRIRITITITITI WP", "DFC AHAHSSGGDF" },
                Labels = new XAxisLabels { Rotation = 0 }
            })
            .SetYAxis(new YAxis
            {
                Title = new YAxisTitle
                {
                    Text = "Employment Type",
                    Align = AxisTitleAligns.Middle
                }
            })
            .SetPlotOptions(new PlotOptions
            {
                Column = new PlotOptionsColumn
                {
                    PointPadding = -0.2,
                    DataLabels = new PlotOptionsColumnDataLabels { Enabled = false }
                }
            })
            .SetLegend(new Legend
            {
                Layout = Layouts.Vertical,
                Align = HorizontalAligns.Right,
                VerticalAlign = VerticalAligns.Middle,
                Floating = true,
                BorderWidth = 1,
                BackgroundColor = new BackColorOrGradient(ColorTranslator.FromHtml("#FFFFFF")),
                Shadow = true
            })
            .SetSeries(
                new Series
                {
                    Name = "Head Count",
                    Data = new Data(new object[] { 30,10,5,20,5,10,25,15 })
                });

如何减少 DotNet.Highcharts 中的列系列差距

How To Reduce Column Series Gap In DotNet.Highcharts

c#

charts

dotnethighcharts

column-chart