Question

是否可以根据值设置条形图的颜色，例如说我的min为0且max为10，如果我的值在0到3之间，颜色为条形绿色，如果它在3到7之间颜色它是蓝色的，如果它在7到10之间变成黄色。

Answer 1

是。可以根据值设置颜色。我们可以通过CustomTemplate属性根据以下代码片段自定义单个条形/列模板颜色来实现您的要求。

代码段[XAML]：

<Grid.Resources>

<local:ColorConverter x:Key="conv1"/>

<DataTemplate x:Key="columnTemplate1">
<Canvas>
<Rectangle Canvas.Left="{Binding RectX}" Canvas.Top="{Binding RectY}"     Height="{Binding Height}"
Width="{Binding Width}" Stretch="Fill"
Fill="{Binding Converter={StaticResource conv1}}"></Rectangle>
</Canvas>
</DataTemplate>

</Grid.Resources>

<Grid.DataContext>
<local:TestingValuesCollection/>
</Grid.DataContext>
<syncfusion:SfChart  x:Name="chart" >
 <syncfusion:SfChart.SecondaryAxis>
 <syncfusion:NumericalAxis Minimum="0" Maximum="10"/>
</syncfusion:SfChart.SecondaryAxis>
<syncfusion:ColumnSeries x:Name="series1" ItemsSource = "{Binding TestingModel}" XBindingPath = "X"
CustomTemplate="{StaticResource columnTemplate1}" YBindingPath = "Y">
</syncfusion:ColumnSeries>


</syncfusion:SfChart>

代码段[C＃]：

public class ColorConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, string language)
    {
        ColumnSegment segment = value as ColumnSegment;

        //First region value declaration.
        DoubleRange firstRegion = new DoubleRange(0, 3);
        SolidColorBrush firstRegionBrush = new SolidColorBrush(Colors.Green);

        //Second region value declaration.
        DoubleRange secondRegion = new DoubleRange(3, 7);
        SolidColorBrush secondRegionBrush = new SolidColorBrush(Colors.Blue);

        //Third region value declaration.
        DoubleRange thirdRegion = new DoubleRange(7, 10);
        SolidColorBrush thirdRegionBrush = new SolidColorBrush(Colors.Yellow);

        if (segment.YData >= firstRegion.Start && segment.YData <= firstRegion.End)
            return firstRegionBrush;
        else if (segment.YData >= secondRegion.Start && segment.YData <= secondRegion.End)
            return secondRegionBrush;
        else if (segment.YData >= thirdRegion.Start && segment.YData <= thirdRegion.End)
            return thirdRegionBrush;

        return segment.Interior;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

我们可以在转换器中添加更多区域并将任何颜色返回到条/列。

我们已根据y轴值完成此代码。如果您的要求基于x轴值意味着检查segment.XData而不是检查转换器中的segment.YData。

Windows UWP SFChart - 基于值的柱形图或条形图颜色？

1 个答案: