LiveCharts WPF 中单独着色的数据点

Question

我正在使用 Live Charts WPF 来绘制一些图表。为了使每个列栏具有不同的颜色，我添加了多个系列，但它没有显示所有系列的 x-axis 标签。为什么？

senderChart.Series = new SeriesCollection();
    int i = 0;
   var ax = new Axis
   {
       Separator = new LiveCharts.Wpf.Separator()
       {
           Step = 1
       },
       Labels = dateValues,
       ShowLabels = true
   };
   senderChart.AxisX.Add(ax);
    foreach (var val in dataValues)
    {
        senderChart.Series.Add(new ColumnSeries
        {
            DataLabels = true,
            Title = dateValues[i],
            Values = new ChartValues<double>{val},
        });
        i++;
    }  

我也尝试了几乎所有不同的将系列分配给图表的方法，但仍然得到相同的结果。

Answer 1

您有 20 个系列，但每个系列只有一个数据点，这就是为什么您只能得到一个标签。仅使用单个系列将更接近 LiveCharts 的预期用途。然后，您可以通过引入mapper (further info) 来控制条形颜色。

这是一个例子：

//create the mapper
var dapperMapper = new CartesianMapper<double>()
    //the data point will be displayed at the position of its index on the X axis
    .X((value, index) => index)
    //the data point will have a Y value of its value (your double) aka the column height
    .Y((value) => value)
    //pass any Func to determine the fill color according to value and index
    //in this case, all columns over 3 height will be pink
    //in your case, you want this to depend on the index
    .Fill((value, index) => (value > 3.0 ? Brushes.HotPink : Brushes.YellowGreen));

//assign the mapper globally (!)
LiveCharts.Charting.For<double>(dapperMapper, SeriesOrientation.Horizontal);

这样，您可以使用单个系列，每个月有一个值。你可以让你的 Fill Func 是这样的，它在 12 种颜色之间循环。

这是一个与您的名字接近的完整示例：

public partial class MainWindow : Window
{
    public SeriesCollection senderChart { get; set; }
    public double[] dataValues = { 1, 7, 4, 8, 3, 12, 4, 3, 2, 21, 4, 2, 7, 3, 23, 34, 5, 47, 2, 3, 45, 58, 3, 4 };
    public string[] dateValues = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
                                 , "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" };

    public MainWindow()
    {
        var doubleMapperWithMonthColors = new LiveCharts.Configurations.CartesianMapper<double>()
            .X((value, index) => index)
            .Y((value) => value)
            .Fill((v, i) =>
            {
                switch (i % 12)
                {
                    case  0: return Brushes.LightBlue; //january
                    case  1: return Brushes.LightCoral; //february
                    case  2: return Brushes.PaleGoldenrod; //march
                    case  3: return Brushes.OrangeRed; //april
                    case  4: return Brushes.BlueViolet; //may
                    case  5: return Brushes.Chocolate; //june
                    case  6: return Brushes.PaleVioletRed; //july
                    case  7: return Brushes.CornflowerBlue; //august
                    case  8: return Brushes.Orchid; //september
                    case  9: return Brushes.Thistle; //october
                    case 10: return Brushes.BlanchedAlmond; //november
                    case 11: return Brushes.YellowGreen; //december 
                    default: return Brushes.Red;
                }
            });

        LiveCharts.Charting.For<double>(doubleMapperWithMonthColors, SeriesOrientation.Horizontal);



        senderChart = new SeriesCollection();

        var columnSeries = new ColumnSeries() { Values = new ChartValues<double>(), DataLabels = true, Title = "Appointments" };
        var labels = this.dateValues;

        foreach (var val in dataValues)
        {
            columnSeries.Values.Add(val);
        }

        this.senderChart.Add(columnSeries);

        DataContext = this;
    }
}

XAML：

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
        Title="MainWindow" Height="400" Width="900">
        <lvc:CartesianChart Series="{Binding senderChart}" Margin="48, 48, 48, 24">
            <lvc:CartesianChart.AxisX>
                <lvc:Axis Labels="{Binding Labels}">
                    <lvc:Axis.Separator>
                        <lvc:Separator Step="1" Stroke="{x:Null}"/>
                    </lvc:Axis.Separator>
                </lvc:Axis>
            </lvc:CartesianChart.AxisX>
        </lvc:CartesianChart>
</Window>

结果：

Answer 2

调用此方法以全局分配图表颜色分配。在图表加载方法之前或在构造函数中调用它。它将 100% 工作。

public static void ChartColorAssignment()
    {
        CartesianMapper<double> _dapperMapper = new CartesianMapper<double>()
            .X((value, index) => index)
            .Y((value) => value)
            .Fill((value, index) => (value > 3.0 ? Brushes.DodgerBlue : Brushes.Yellow));
        Charting.For<double>(_dapperMapper, SeriesOrientation.Horizontal);
        var doubleMapperWithMonthColors = new CartesianMapper<double>()
            .X((value, index) => index)
            .Y((value) => value)
            .Fill((v, i) =>
            {
                switch (i % 12)
                {
                    case 0: return Brushes.ForestGreen; //january
                    case 1: return Brushes.Coral; //february
                    case 2: return Brushes.Crimson; //march
                    case 3: return Brushes.OrangeRed; //april
                    case 4: return Brushes.DarkViolet; //may
                    case 5: return Brushes.Chocolate; //june
                    case 6: return Brushes.MediumVioletRed; //july
                    case 7: return Brushes.SteelBlue; //august
                    case 8: return Brushes.Orange; //september
                    case 9: return Brushes.Teal; //october
                    case 10: return Brushes.RosyBrown; //november
                    case 11: return Brushes.YellowGreen; //december 
                    default: return Brushes.Red;
                }
            });

        Charting.For<double>(doubleMapperWithMonthColors, SeriesOrientation.Horizontal);
    }