【问题标题】:Oxyplot Bar Width氧绘图条宽度
【发布时间】:2021-12-28 01:58:27
【问题描述】:

我正在使用 Oxyplot 制作条形图。有没有办法改变条的宽度?

我找到了这个解决方案:

protected override double GetActualBarWidth()
{
    var categoryAxis = this.GetCategoryAxis();
    return this.ColumnWidth / (1 + categoryAxis.GapWidth) / categoryAxis.MaxWidth;
}

从这里开始:

How do I set the width of the bars in an Oxyplot column plot?

但我不明白如何应用它。

这是我的代码:

<ContentPage.BindingContext>
        <local:MainPageViewModel></local:MainPageViewModel>
    </ContentPage.BindingContext>
<oxy:PlotView Model="{Binding Model}" HeightRequest="200" />

这是我的视图模型:

public class MainPageViewModel
    {
        public PlotModel Model { get; set; }

        public MainPageViewModel()
        {
            CategoryAxis xaxis = new CategoryAxis();
            xaxis.Position = AxisPosition.Bottom;
            xaxis.MajorGridlineStyle = LineStyle.None;
            xaxis.MinorGridlineStyle = LineStyle.None;
            xaxis.MinorTickSize = 0;
            xaxis.MajorTickSize = 0;
            xaxis.TextColor = OxyColors.Gray;
            xaxis.FontSize = 10.0;
            xaxis.Labels.Add("S");
            xaxis.Labels.Add("M");
            xaxis.Labels.Add("T");
            xaxis.Labels.Add("W");
            xaxis.Labels.Add("T");
            xaxis.Labels.Add("F");
            xaxis.Labels.Add("S");

            LinearAxis yaxis = new LinearAxis();
            yaxis.Position = AxisPosition.Left;
            yaxis.MajorGridlineStyle = LineStyle.None;
            xaxis.MinorGridlineStyle = LineStyle.None;
            yaxis.MinorTickSize = 0;
            yaxis.MajorTickSize = 0;
            yaxis.TextColor = OxyColors.Gray;
            yaxis.FontSize = 10.0;
            yaxis.FontWeight = FontWeights.Bold;

            ColumnSeries s2 = new ColumnSeries();
            s2.LabelPlacement = LabelPlacement.Inside;
            s2.LabelFormatString = "{0}";
            s2.TextColor = OxyColors.White;
            s2.ColumnWidth = 5.0;
            s2.Items.Add(new ColumnItem
            {
                Value = Convert.ToDouble(50),
                Color = OxyColor.Parse("#02cc9d")
            });
            s2.Items.Add(new ColumnItem
            {
                Value = Convert.ToDouble(40),
                Color = OxyColor.Parse("#02cc9d")
            });
            s2.Items.Add(new ColumnItem
            {
                Value = Convert.ToDouble(30),
                Color = OxyColor.Parse("#02cc9d")
            });
            s2.Items.Add(new ColumnItem
            {
                Value = Convert.ToDouble(20),
                Color = OxyColor.Parse("#02cc9d")
            });
            s2.Items.Add(new ColumnItem
            {
                Value = Convert.ToDouble(30),
                Color = OxyColor.Parse("#02cc9d")
           
            });
            s2.Items.Add(new ColumnItem
            {
                Value = Convert.ToDouble(40),
                Color = OxyColor.Parse("#02cc9d")
            });
            s2.Items.Add(new ColumnItem
            {
                Value = Convert.ToDouble(50),
                Color = OxyColor.Parse("#02cc9d")
            });
            

            Model = new PlotModel();
            Model.Axes.Add(xaxis);
            Model.Axes.Add(yaxis);
            Model.Series.Add(s2);
            Model.PlotAreaBorderColor = OxyColors.Transparent;
        }

    }

【问题讨论】:

  • 我相信你必须继承 GetActualBarWidth() 的子类,然后使用顶部的 sn-p 来覆盖该方法。根据非常粗略的谷歌搜索,可能是一个系列课程或类似的东西。
  • 看起来你会继承ColumnSeries
  • @Steve,所以在我的 MainPageViewModel 类之外,创建另一个类,如 public class BarChartClass : ColumnSeries {
  • @Steve 或者我可以扩展 MainPageViewModel 类
  • @Steve,我尝试扩展 MainPageViewModel:ColumnSeries,我没有收到任何错误,但没有调用该类

标签: c# xamarin.forms oxyplot


【解决方案1】:

为了扩展给定的答案,

ColumnWidth(可能令人困惑)用于确定共享轴的条形的相对大小。

所有条形(在您的情况下,只是一个)在轴上消耗的宽度由 CategoryAxis.GapWidth 属性确定 - 正如其他人所指出的那样 - 与系列的相对宽度无关。该属性是空白空间(间隙)与非空白空间的比率(因此 1 的默认值是 1:1 空白/非空白比率;小于 1 的值将向条形提交更多空间)。

您链接的答案仅向您展示了如何在内部计算宽度:令人困惑的是MaxWidth 取决于报告的系列宽度,因此当您拥有单个系列时,该比率非常无用。

【讨论】:

    【解决方案2】:

    您可以通过更改 GapWidth 来实现。值越大,宽度越小。

      xaxis.GapWidth = 10;
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2019-02-13
      • 1970-01-01
      • 1970-01-01
      • 2010-11-19
      • 1970-01-01
      • 2022-01-15
      • 1970-01-01
      相关资源
      最近更新 更多