你的位置:首页 > ASP.net教程

[ASP.net教程]DynamicDataDisplay


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