none
WPF中使用Visifire的问题 RRS feed

  • 问题

  • Visifire中我将Column和StackedColumn组合,这是我后台代码:

    private void CreateMultiSeriesChart() { Chart mychart = new Chart(); //标题的添加 Title title = new Title(); title.Text = "Jobs"; mychart.Titles.Add(title); //X轴标题 Axis xAxis = new Axis(); xAxis.Title = "Month"; mychart.AxesX.Add(xAxis); //Y轴标题 Axis yAxis = new Axis(); yAxis.Title = "Numbers"; mychart.AxesY.Add(yAxis); //创建第一个DataSeries DataSeries oneDataSeries = new DataSeries(); oneDataSeries.LabelEnabled = true; oneDataSeries.LabelText = "#YValue"; oneDataSeries.LegendText = "Philadelphia"; oneDataSeries.RenderAs = RenderAs.Column; //创建第一个DataSeries的DataPoint DataPoint oneDataPoint = null; for (int i = 1; i <= 10; i++) { oneDataPoint = new DataPoint(); oneDataPoint.AxisXLabel = "Num:" + i; oneDataPoint.YValue = i; oneDataSeries.DataPoints.Add(oneDataPoint); } mychart.Series.Add(oneDataSeries); //创建第二个DataSeries DataSeries twoDataSeries = new DataSeries(); twoDataSeries.LabelEnabled = true; twoDataSeries.LabelText = "#YValue"; twoDataSeries.LegendText = "Phoenix"; twoDataSeries.RenderAs = RenderAs.StackedColumn; //创建第二个DataSeries的DataPoint DataPoint twoDataPoint = null; for (int i = 11; i <= 20; i++) { twoDataPoint = new DataPoint(); twoDataPoint.AxisXLabel = "Num:" + i; twoDataPoint.YValue = i; twoDataSeries.DataPoints.Add(twoDataPoint); } mychart.Series.Add(twoDataSeries); //创建第三个DataSeries DataSeries threeDataSeries = new DataSeries(); threeDataSeries.RenderAs = RenderAs.StackedColumn; threeDataSeries.LabelEnabled = true; threeDataSeries.LabelText = "#YValue"; //创建第三个DataSeries的DataPoint DataPoint threeDataPoint = null; for (int i = 21; i <= 30; i++) { threeDataPoint = new DataPoint(); threeDataPoint.AxisXLabel = "Num:" + i; threeDataPoint.YValue = i; threeDataSeries.DataPoints.Add(threeDataPoint); } mychart.Series.Add(threeDataSeries); Layout.Children.Add(mychart); }

    前台:

    <Grid Name="Layout"></Grid>

    显示效果:

    可是我想实现这样的效果【注:只是我的想法图,有点丑,请谅解!】:

    各位大侠,麻烦知道一下!

    2012年6月18日 7:03

答案

  • OK, 完成, 先看效果图:

    主要思路,通过修改 http://wpf.codeplex.com/SourceControl/list/changesets 继承ColumnDataPoint和ColumnSeries类型,添加各个左上下右的依赖属性,然后修改ColumnDataPoint的默认样式,添加四个Border来绘制柱状图形。

    样例下载: https://skydrive.live.com/#cid=51B2FDD068799D15&id=51B2FDD068799D15%21995

    如何使用:

            <chart:Chart>
                <chart:Chart.Series>
                    <local:MyColumnSeries ItemsSource="{Binding}"
                                          DependentValuePath="LeftValue"
                                          IndependentValuePath="Title"
                                          LeftDependentValuePath="LeftValue"
                                          TopDependentValuePath="TopValue"
                                          BottomDependentValuePath="BottomValue"
                                          RightDependentValuePath="RightValue"
                                          
                                          LeftBackground="Red"
                                          TopBackground="Black"
                                          BottomBackground="Orange"
                                          RightBackground="Green">
                        <local:MyColumnSeries.DependentRangeAxis>
                            <chart:LinearAxis Minimum="0" Maximum="400" Orientation="Y" ShowGridLines="True"/>
                        </local:MyColumnSeries.DependentRangeAxis>
                    </local:MyColumnSeries>
                </chart:Chart.Series>
            </chart:Chart>

    四个依赖数值分别邦定你的数据模型的四个属性, 原来的 DependentValuePath和IndependentValuePath也需要进行设置。 要手动指定DependentRangeAxis Y坐标轴,设置其最小最大值。 可以选择指定四个图形的颜色。

    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us

    2012年6月21日 16:57
    版主

全部回复

  • 不确定你这样的设想能不能做,不过看起来你应该要把每个Column的template换成你想要的这样的样子,然后绑定数据
    2012年6月20日 6:18
  • 我看了visifire官方的帮助文档,在他官方的效果图中没有我要的这个效果呢!

    2012年6月21日 1:23
  • visifire不在微软的支持范围内,我们也没有他的源代码,所以你要坚持用visifire 的话,只有咨询visifire官方了.

    不过我可以帮你通过扩展 WPF Toolkit Chart来实现,需要点时间,等我1个小时。

    你可以先看下我以前做过的一些扩展WPF Toolkit Chart的帖子:

    http://social.msdn.microsoft.com/Forums/is/winformsdatacontrols/thread/5f0d90bd-6e9f-4de7-a8da-9231b31bf184


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us

    2012年6月21日 14:28
    版主
  • OK, 完成, 先看效果图:

    主要思路,通过修改 http://wpf.codeplex.com/SourceControl/list/changesets 继承ColumnDataPoint和ColumnSeries类型,添加各个左上下右的依赖属性,然后修改ColumnDataPoint的默认样式,添加四个Border来绘制柱状图形。

    样例下载: https://skydrive.live.com/#cid=51B2FDD068799D15&id=51B2FDD068799D15%21995

    如何使用:

            <chart:Chart>
                <chart:Chart.Series>
                    <local:MyColumnSeries ItemsSource="{Binding}"
                                          DependentValuePath="LeftValue"
                                          IndependentValuePath="Title"
                                          LeftDependentValuePath="LeftValue"
                                          TopDependentValuePath="TopValue"
                                          BottomDependentValuePath="BottomValue"
                                          RightDependentValuePath="RightValue"
                                          
                                          LeftBackground="Red"
                                          TopBackground="Black"
                                          BottomBackground="Orange"
                                          RightBackground="Green">
                        <local:MyColumnSeries.DependentRangeAxis>
                            <chart:LinearAxis Minimum="0" Maximum="400" Orientation="Y" ShowGridLines="True"/>
                        </local:MyColumnSeries.DependentRangeAxis>
                    </local:MyColumnSeries>
                </chart:Chart.Series>
            </chart:Chart>

    四个依赖数值分别邦定你的数据模型的四个属性, 原来的 DependentValuePath和IndependentValuePath也需要进行设置。 要手动指定DependentRangeAxis Y坐标轴,设置其最小最大值。 可以选择指定四个图形的颜色。

    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us

    2012年6月21日 16:57
    版主
  • Bob Bao

    谢谢,这就是我想要的结果呢,我自己试试,十分感谢!!!!

    2012年6月23日 5:28
  • Bobbao:

    Toolkit显示的样式怎么改,可以把每个颜色所代表的填写上去吗,还有可以把‘series’去掉吗?

    2012年7月2日 7:00
  • 其实修改Tooltip已经很简单了,你如果仔细看了我的代码,你就会发现所有这个DataPoint的样式和模板都是定义在 Themes\Generic.xaml 里面的。

    你在其中可以看到四个Border,名字分别为 Left/Top/Bottom/RightPart的元素,每个元素都有独立的 Tooltip,所以你只需要修改这里的Tooltip Content既可把你要显示的内容放进去。

    去掉Series那一块是Chart本身就可以实现的:

        <chart:Chart>
          <chart:Chart.LegendStyle>
            <Style TargetType="{x:Type dv:Legend}" xmlns:dv="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit">
              <Setter Property="Visibility" Value="Collapsed"/>
            </Style>
          </chart:Chart.LegendStyle>
          <chart:Chart.Series>
    ......


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us

    2012年7月2日 10:44
    版主
  • BobBao:

    1.去掉series问题?

     我按照你说的方法写了,可是出现如图所示:

    仍会有这个点点出现,应该怎么去掉!

    2.Tooltip的问题?

    这是可以实现鼠标点击时显示数值,可是我想在

    2012年7月3日 10:07
  •       <chart:Chart.LegendStyle>
            <Style TargetType="{x:Type dv:Legend}">
              <Setter Property="Width" Value="0"/>
            </Style>
          </chart:Chart.LegendStyle>

    宽度到0吧。

    2. 可是什么?  


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us

    2012年7月3日 10:46
    版主
  • BobBao:

    1.现在Series的问题解决的了!

    2.ToolTip的问题?    toolkit显示的图表没有显示哪块颜色对应哪个功能块,如图效果:

    a.   x轴下面各模块的显示

    b.  粉色字效果的显示

    2012年7月4日 0:54
  • Bob Bao:

    我还想问一个问题呢,对于一个初学者,我都不知道在setter中写啥,有什么好资源可以推荐吗?

    2012年7月4日 0:59
  • 关于轴上显示,我们则只能用一个字符串来表达,因为一个轴只能绑定到一个属性上。但是Tooltip要与其对应,我们可以修改如我之前回复的,Tooltip部分的样式, 用模板绑定绑定到DataPoint定义的标题属性上:

    <ToolTipService.ToolTip>
         <ContentControl Content="{TemplateBinding RightTitle}" />
    </ToolTipService.ToolTip>


    然后在DataPoint如同background一样,添加四个以来属性以捕获四个标题:

            #region Titles DPs
    
            public string LeftTitle
            {
              get { return (string)GetValue(LeftTitleProperty); }
              set { SetValue(LeftTitleProperty, value); }
            }
            public static readonly DependencyProperty LeftTitleProperty =
                DependencyProperty.Register("LeftTitle", typeof(string), typeof(MyColumnDataPoint), new UIPropertyMetadata(""));
    
            public string TopTitle
            {
              get { return (string)GetValue(TopTitleProperty); }
              set { SetValue(TopTitleProperty, value); }
            }
            public static readonly DependencyProperty TopTitleProperty =
                DependencyProperty.Register("TopTitle", typeof(string), typeof(MyColumnDataPoint), new UIPropertyMetadata(""));
    
            public string BottomBackground
            {
              get { return (string)GetValue(BottomTitleProperty); }
              set { SetValue(BottomTitleProperty, value); }
            }
            public static readonly DependencyProperty BottomTitleProperty =
                DependencyProperty.Register("BottomTitle", typeof(string), typeof(MyColumnDataPoint), new UIPropertyMetadata(""));
    
            public string RightBackground
            {
              get { return (string)GetValue(RightTitleProperty); }
              set { SetValue(RightTitleProperty, value); }
            }
            public static readonly DependencyProperty RightTitleProperty =
                DependencyProperty.Register("RightTitle", typeof(string), typeof(MyColumnDataPoint), new UIPropertyMetadata(""));
    
            #endregion

    在Series同样定义四个属性来获取绑定Path,然后在PrepareDataPoint中如同值属性一样,对每个DataPoint的Title进行绑定赋值:

            (dataPoint as MyColumnDataPoint).SetBinding(MyColumnDataPoint.LeftTitleProperty, new Binding(this.LeftTitlePath));
            (dataPoint as MyColumnDataPoint).SetBinding(MyColumnDataPoint.TopTitleProperty, new Binding(this.TopTitlePath));
            (dataPoint as MyColumnDataPoint).SetBinding(MyColumnDataPoint.BottomTitleProperty, new Binding(this.BottomTitlePath));
            (dataPoint as MyColumnDataPoint).SetBinding(MyColumnDataPoint.RightTitleProperty, new Binding(this.RightTitlePath));

    我在class Item中加了四个属性标记四个值的名字:

      public class Item
      {
        public Item(string title, string ltitle, string ttitle, string btitle, string rtitle,
                    double lvalue, double tvalue, double bvalue, double rvalue)
        {
          Title = title + "\n" +
            ltitle + "\n" + ttitle + "\n" + btitle + "\n" + rtitle;
    
          LeftTitle = ltitle;
          TopTitle = ttitle;
          BottomTitle = btitle;
          RightTitle = rtitle;
    
          LeftValue = lvalue;
          TopValue = tvalue;
          BottomValue = bvalue;
          RightValue = rvalue;
        }
        public string Title { get; set; }
    
        public string LeftTitle { get; set; }
        public string TopTitle { get; set; }
        public string BottomTitle { get; set; }
        public string RightTitle { get; set; }
    
        public double LeftValue { get; set; }
        public double TopValue { get; set; }
        public double BottomValue { get; set; }
        public double RightValue { get; set; }
      }


    然后数据集合这样初始化:

          this.DataContext = new ObservableCollection<Item>()
                {
                    new Item("item 1","p1","p2", "p3","p4", 100, 23, 34, 50),
                    new Item("item 2","p1","p2", "p3","p4", 200, 54, 64, 100),
                    new Item("item 3","p1","p2", "p3","p4", 250, 74, 24, 125),
                    new Item("item 4","p1","p2", "p3","p4", 300, 23, 98, 350)
                };

       


    完整修改后的例子:https://skydrive.live.com/embed?cid=51B2FDD068799D15&resid=51B2FDD068799D15%21995&authkey=AGJzLJNKuEGeLls

    ---------------

    初学者如何学习WPF? 其实你之后遇到的都是WPF中非常基本的样式和模板的问题,如何学习,其实很简单,寻找一本书或者资料,耐心的看下去,做好例子的实践。 我绝对不会相信有哪一本WPF书上是没有样式模板阿,数据绑定阿这些内容。 所以至于是那本书,我觉得都是一样的,不同的是是否有毅力和耐心去读完。去理解。

    试试看,我们最初都是WPF初学者,耐住寂寞,慢慢读下来,就会慢慢明白这些WPF的概念的。


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us

    2012年7月4日 3:40
    版主
  • BobBao:

     非常谢谢你的建议,学习wpf的建议,对我很必要!

    对了,toolkit中图表可以实现以下效果吗?

    1.如图:

    不同颜色柱形图,不同功能!

    2.如图:

    所画的数字显示!

    2012年7月4日 5:47
  • 可以,Tooltip里面可以放置任何元素的,只要你能够将你要的数据传递进去就可以了。

    不过我希望你可以先学习了WPF一些基本样式模板定以后,再看这块,因为你的这个case已经是一个比较复杂的自定义控件了。

    柱状上显示值,也是同样道理,修改DataPoint的模板,往每个部分的Border中加入一个文字绑定到你的值,比如LeftPart:

                <Border BorderBrush="{TemplateBinding BorderBrush}" 
                                    BorderThickness="{TemplateBinding BorderThickness}" 
                                    Height="{TemplateBinding LeftDependentValueHeight}"
                                    VerticalAlignment="Bottom"
                                    Grid.Column="0" x:Name="LeftPart">
    
                  <Grid Background="{TemplateBinding LeftBackground}">
                    <Rectangle>
                      <Rectangle.Fill>
                        <LinearGradientBrush>
                          <GradientStop Color="#77ffffff" Offset="0" />
                          <GradientStop Color="#00ffffff" Offset="1" />
                        </LinearGradientBrush>
                      </Rectangle.Fill>
                    </Rectangle>
                    <Border BorderBrush="#ccffffff" BorderThickness="1">
                      <Border BorderBrush="#77ffffff" BorderThickness="1" />
                    </Border>
                    <ContentControl Content="{TemplateBinding LeftDependentValue}" Foreground="White" 
                                    VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="9"/>
                  </Grid>
                  <ToolTipService.ToolTip>
                    <StackPanel>
                      <ContentControl Content="{TemplateBinding LeftTitle}" />
                      <ContentControl Content="{TemplateBinding LeftDependentValue}"/>
                    </StackPanel>
                  </ToolTipService.ToolTip>
                </Border>


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us

    2012年7月4日 6:09
    版主
  • BobBao:

    这是个挺复杂的图表呢,想问一下可以实现这种效果吗?

    如图:

    红色圈圈处的效果,不同颜色柱形,代表不同的功能!

    2012年7月4日 7:44
  • 简单的说,你可以直接在界面上放一个StackPanel 横向,然后里面放置一些小的正方形框,填充你的Column的颜色,后面跟上标签。

    复杂的话,就需要重写Chart控件的样式模板,在七下方添加这块显示,并且设置绑定。


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us

    2012年7月6日 6:22
    版主
  • Bob Bao :

    thx,我知道了!


    wy926

    2012年7月7日 1:29
  • 使用toolkit画折线图能不能实现放大缩小啊  求帮助!!!!

    2014年9月1日 2:59
  • toolkit 画个折线图 能不能实现放缩功能啊?
    2014年9月1日 7:05