ColumnSeries 中每个值的不同颜色

Question

我正在 WPF 中使用 LiveCharts 创建带有列的笛卡尔图表。这些值来自一个列表，该列表又填充有数据库中的值。

一切工作正常，除了我希望每列都有不同的填充。什么颜色并不重要，每个单独的列都有一个随机颜色。另外，我不想为每个值创建一个新系列，因为值太多。

类似问题中的 Mappers 方法对我不起作用，因为该示例会根据值的高低更改颜色。我想要每个不同的轴标签有不同的颜色。

这是我创建该系列的代码部分：

cartesianChart.Series.Add(new ColumnSeries
{
    Title = "Column Chart: ",
    Fill = Brushes.CadetBlue,
    Values = valuesList.AsChartValues(),
    DataLabels = true,
    LabelPoint = point => (point.Y).ToString(),
});

图表如下所示：

任何想法将不胜感激。

Answer 1

如果您在 LiveCharts 中使用 SeriesCollection，它会自动为集合中的每个单独系列分配不同的颜色。

对于这个示例，我从我的一个项目中获取了一个片段，该项目添加了多个系列，并有一个单独的列表，其中包含所有系列名称。这将循环并将每个系列添加到集合中，并从列表中添加系列数据和系列名称。

实时图表齿轮示例：

SeriesCollection = new LiveCharts.SeriesCollection();

List<GearedValues<long>> seriesList = new List<GearedValues<long>>();

seriesList.Add(Data1.AsGearedValues().WithQuality(Quality.Low));
seriesList.Add(Data2.AsGearedValues().WithQuality(Quality.Low));

for(int i = 0; i < seriesName.Count(); ++i)
{
    SeriesCollection.Add(new GColumnSeries
    {
        Values = seriesList[i],
        Name = seriesName[i],
        Fill = System.Windows.Media.Brushes.Transparent,
        StrokeThickness = 1,
        PointGeometry = null,
        LineSmoothness = 0,
    });
}

标准实时图表示例

SeriesCollection = new LiveCharts.SeriesCollection();

List<ChartValues<long>> seriesList = new List<ChartValues<long>>();

seriesList.Add(Data1);
seriesList.Add(Data2);

for(int i = 0; i < seriesName.Count(); ++i)
{
    SeriesCollection.Add(new ColumnSeries
    {
        Values = seriesList[i],
        Name = seriesName[i],
        Fill = System.Windows.Media.Brushes.Transparent,
        StrokeThickness = 1,
        PointGeometry = null,
        LineSmoothness = 0,
    });
}

SeriesCollection 颜色是为集合中的每个系列预设的，但是可以修改这些默认颜色。

Answer 2

尝试 DataPoint 类：

DataPoint p=new DataPoint(chart1.Series["Celler"]);
p.SetValueY(cellVoltage[cell]);
p.Label=cellname[cell];//string
p.Color=Color.FromArgb(255 - cell * 20, 255, 80cell*20);
chart1.Series["Celler"].Points.Add(p);



Answer 3

我使用 Series.OnPointMeasured 事件实现了这一点。请参阅：ConditionalDraw 示例

var index = 0;
var colSeries = new ColumnSeries
{
    Title = "Column Chart: ",
    Fill = Brushes.CadetBlue,
    Values = valuesList.AsChartValues(),
    DataLabels = true,
    LabelPoint = point => (point.Y).ToString(),
}
colSeries.OnPointMeasured(point =>
{
    if (point.Visual is null) return;
    point.Visual.Fill = new SolidColorPaint(SKColor.FromHsl(index * 20, 50, 50));
    index++;
});
cartesianChart.Series.Add(colSeries);

基本上，这个事件允许您设置几何图形的填充，我认为。您可以使用点值来确定填充颜色，如示例中所示，或者如上面我只是使用索引来计算颜色色调。您可以将其调整为索引颜色等。