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

Question

是否可以根据值设置条形颜色，例如我的最小值是 0，最大值是 10，如果我的值介于 0 和 3 之间，则将条形颜色设置为绿色，如果它介于 3 和7 为蓝色，7 到 10 为黄色。

Answer 1

是的。可以根据值设置颜色。我们可以根据以下代码片段通过 CustomTemplate 属性自定义单独的 bar/column 模板颜色来满足您的要求。

代码片段[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();
    }
}

我们可以在转换器中添加更多区域，return 任何颜色到 bar/column。

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

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

Windows UWP SFChart - Column or Bar chart plot color based on value?

syncfusion