对于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属性赋值,既可以画出柱状图。