如何使用实时图表在条形图的每一列上添加标签

托尔·吉文森

使用LiveCharts(https://lvcharts.net/)和C#,我想要一个条形图,其中每一列在x轴上都有一个标签。但是,我仅在第二列上得到一个标签。标签以数据方式存在,因为当我将鼠标悬停在列上时可以在弹出窗口中看到它们。

我试图弄乱轴上的各种标签属性以及我的labelformatter,但是我只在第二列上得到一个标签。

我的图表的XAML实现:

<lvc:CartesianChart Name="CartesianChart" Series="{Binding Series}" MinHeight="400" MinWidth="800" >

    <lvc:CartesianChart.AxisX>
        <lvc:Axis MinValue="0" Labels="{Binding XAxisLabels}" ShowLabels="True" LabelsRotation="50">
            <lvc:Axis.Separator>
                <lvc:Separator Stroke="{Binding AxisStrokeColor}">/lvc:Separator>
            </lvc:Axis.Separator>
        </lvc:Axis>
    </lvc:CartesianChart.AxisX>

    <lvc:CartesianChart.AxisY>
        <lvc:Axis MinValue="0"   MaxValue="10" LabelFormatter="{Binding LabelFormatter}">
            <lvc:Axis.Separator>
                <lvc:Separator Stroke="{Binding AxisStrokeColor}">/lvc:Separator>
            </lvc:Axis.Separator>
        </lvc:Axis>
    </lvc:CartesianChart.AxisY>
</lvc:CartesianChart>

我的实例化图表的代码:

public partial class Chart : UserControl
{
    public SolidColorBrush AxisStrokeColor { get; set; }
    public SeriesCollection Series { get; set; }
    public string[] XAxisLabels { get; set; }
    public Func<double, string> LabelFormatter { get; set; }

    public Chart()
    {
        Series = new SeriesCollection();
        InitializeComponent();
        AxisStrokeColor = Brushes.Transparent;
        CartesianChart.DataContext = this;
        CartesianChart.LegendLocation = LegendLocation.Right;
    }

    public void addBarSeries(List<KeyValuePair<string, double>> data, string title)
    {
        ChartValues<ObservableValue> values = new ChartValues<ObservableValue>();
        string[] labels = new string[data.Count];

        for (int i = 0; i < data.Count; i++)
        {
            values.Add(new ObservableValue(data[i].Value));
            labels[i] = data[i].Key;
        }

        Series.Add(new ColumnSeries
            {
                Title = title,
                Values = values,
                DataLabels = true,
            });

        XAxisLabels = labels;
        LabelFormatter = value => value.ToString("N");
    }
}

我用来用测试数据填充图表的功能

Chart.addBarSeries(seedData3(), "myTitle");

public List<KeyValuePair<string, double>> seedData3()
        {
            var returnCollection = new List<KeyValuePair<string, double>>();

            for (int i = 0; i < 10; i++)
            {

                returnCollection.Add(new KeyValuePair<string, double>("Timmy " + i, i));
            }

            return returnCollection;
        }

如何确定每列显示一个标签?

牵强

轴上显示的标签数量是自动计算的,以适合视图而不会重叠。

如果您想强制渲染标签的值,只需在Step添加属性Separator

<lvc:Separator Step="1" Stroke="{Binding AxisStrokeColor}"></lvc:Separator>

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

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

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

我想增加一个点击事件,使用JavaScript,以便在chart.js之一个条形图的每一列

MPAndroidChart-向条形图添加标签

向水平条形图添加标签

如何在R中使用ggplot2在条形图中的条形图中添加标签?

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

如何在熊猫数据框中的每一列中绘制唯一值的数量作为条形图?

Altair:如何向具有行的条形图添加标签

如何使用刻面创建条形图并使用Seaborn添加标签

如何通过编号为条形图添加标签。(使用python 3.7+中的turtle从列表中制作直方图)

如何在同一图表上用单独的轴绘制条形图和线形图?

堆叠的条形图,其中每一列都是Altair中具有多列的条形图

如何使用e_charts()在同一图表中组合条形图和线形图?

如何在matplotllib条形图的x轴上添加第二行标签

如何显示多个字典在matplotlib条形图中每一列的总数?

Google条形图标签动态数据。如何添加标签?

如何使用ggplot在一个图表中创建条形图和折线图

R图形:向聚类/闪避的条形图添加标签

如何使用Javascript为图表中的每一列添加更多href元素

如何在条形按钮项目上添加标签?

D3:如何在分组条形图中的每个条形上方添加标签

如何设置正确的标签以适合iOS图表的条形图和颜色列?

条形图 - 在一列熊猫上绘制多行

在累积条形图的每一步添加标签

如何在“计数条形图”上添加百分比标签

如何使用另一列的排序顺序对条形图进行排序?

堆叠条形图仅显示每隔一列

使用 stat=summary 向条形图添加标签

在 r 中为条形图添加标签

为条形图添加标签:chartjs