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



是否可以根据值设置条形的颜色,例如,假设我的最小值

为 0,最大值为 10,如果我的值介于 0 和 3 之间,则条形图为绿色,如果介于 3 和 7 之间,则将其着色为蓝色,如果介于 7 和 10 之间,则将其着色为黄色。

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

代码段 [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 轴值,则表示检查段。XData 而不是检查段。YData 在转换器中。

最新更新