DynamicDataDisplay-BarChart

Posted 2020-07-26

对于d3的BarChart，其数据源为ItemsSource，支持bingding。

<d3:BarChart ItemsSource="{Binding SampleDatas}">
　　<d3:TemplateMarkerGenerator>
　　　　<DataTemplate>
　　　　　　<Rectangle Stroke="BlanchedAlmond" StrokeThickness="0" StrokeLineJoin="Round"
　　　　　　　　　　　　d3:ViewportPanel.X="{Binding X}"
　　　　　　　　　　　　d3:ViewportPanel.Y="0"
　　　　　　　　　　　　d3:ViewportPanel.ViewportVerticalAlignment="Bottom"
　　　　　　　　　　　　d3:ViewportPanel.ViewportHeight="{Binding Ymax}"
　　　　　　　　　　　　Width="10"
　　　　　　　　　　　　Fill="Blue"
　　　　　　　　　　　　ToolTip="{Binding Ymax}" ToolTipService.InitialShowDelay="0"/>
　　　　</DataTemplate>
　　</d3:TemplateMarkerGenerator>
</d3:BarChart>

是利用绑定传给了ItemsSource数据，柱状图中的Marker是利用ViewportPanel的属性确定的位置，大小，其中X确定X值，Y确定marker在Y轴上的最小值，ViewportHeight确定marker的高度，ViewportWidth确定宽度。

其中SampleDatas为

private ObservableCollection<SampleDataForBar> _sampleDatas;

public ObservableCollection<SampleDataForBar> SampleDatas
{
　　　　get { return _sampleDatas; }
　　　　set
　　　　　　{
　　　　　　　　_sampleDatas = value;
　　　　　　　　OnPropertyChanged("SampleDatas");//属性更改通知
　　　　　　}
}

public class SampleDataForBar:BindableBase
{
　　private double x;
　　public double X
　　{
　　　　get { return x; }
　　　　set
　　　　　　{
　　　　　　　　x = value;
　　　　　　　　OnPropertyChanged("X");
　　　　　　}
　　}

　　private double ymax;

　　public double Ymax
　　{
　　　　get { return ymax; }
　　　　set
　　　　　　{
　　　　　　　　ymax = value;
　　　　　　　　OnPropertyChanged("Ymax");
　　　　　　}
　　}

}

SampleDataForBar类就是为了支持BarChart中的ItemsSource属性，其中规定了X，和Ymax。

这样只需要给SmpleDatas属性赋值，既可以画出柱状图。