DynamicDataDisplay学习之路(二)
时间:2019-01-11
本文章向大家介绍DynamicDataDisplay学习之路(二),主要包括DynamicDataDisplay学习之路(二)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
之前有使用步骤,使用的是源码示例: DynamicDataDisplay学习之路(一)
今天讲讲xaml中用到的东西:
1,绘图仪的主X、Y轴
<!--主X轴刻度[默认显示]-->
<d3:ChartPlotter.MainHorizontalAxis>
<!--
常规刻度[默认显示]
Visibility:是否显示刻度轴[Visible,Hidden]
ShowMinorTicks:是否显示短刻度线
Height:刻度轴高度,0就相当于隐藏刻度轴
-->
<d3:HorizontalAxis Visibility="Visible" ShowMinorTicks="False" Height="20"/>
<!--整数刻度-->
<!--<d3:HorizontalIntegerAxis/>-->
<!--时间轴[年月日时分秒]刻度-->
<!--<d3:HorizontalDateTimeAxis/>
<!--<d3:HorizontalTimeSpanAxis/>-->
</d3:ChartPlotter.MainHorizontalAxis>
<!--主Y轴刻度[默认显示]-->
<d3:ChartPlotter.MainVerticalAxis>
<d3:VerticalAxis Visibility="Hidden"/>
</d3:ChartPlotter.MainVerticalAxis>
2,标题
<!--绘图仪主标题-->
<d3:Header TextBlock.FontSize="20">Very simple chart</d3:Header>
<!--Y轴标题-->
<d3:VerticalAxisTitle>Sine value</d3:VerticalAxisTitle>
<!--X轴标题-->
<d3:HorizontalAxisTitle>Sine argument</d3:HorizontalAxisTitle>
3,常数线
<!--
垂直于Y轴
Value:对应的Y轴刻度值
Stroke:画线的颜色
StrokeThickness:画线的厚度
StrokeDashArray:画虚线
-->
<d3:HorizontalLine Value="1" Stroke="Aqua" StrokeThickness="1" StrokeDashArray="4,5" />
<!--垂直于X轴-->
<d3:VerticalLine />
4,十字光标
<!--
十字光标
默认显示数值,尽管坐标轴是时间轴也是数值,
想要出现时间类型,需在CS类中更改显示的字符串
-->
<d3:CursorCoordinateGraph />
CursorCoordinateGraph 显示时间:可借鉴:在cs类中更改显示字符串 ,修改源代码来实现 横坐标显示日期
5,数据跟随图【DataFollowChart】
在源代码示例 【LineTestSample】中有演示跟代码
<d3:ChartPlotter Name="plotter" Margin="0,5,0,0">
<d3:LineGraph Name="lineGraph" Stroke="OrangeRed" StrokeThickness="1"/>
<d3:VerticalLine x:Name="vLine1" Value="{Binding ElementName=dataFollowChart, Path=MarkerPosition.X}" StrokeThickness="2" Stroke="Violet" StrokeDashArray="4,5" IsEnabled="False" />
<d3:HorizontalLine x:Name="hLine1" Value="{Binding ElementName=dataFollowChart, Path=MarkerPosition.Y}" StrokeThickness="2" Stroke="Violet" StrokeDashArray="4,5" IsEnabled="False" />
<d3:DataFollowChart Name="dataFollowChart" PointSource="{Binding ElementName=lineGraph}" >
<DataTemplate>
<Grid d3:ViewportPanel.ScreenOffsetY="16">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Rectangle RadiusX="3" RadiusY="3" Stroke="LightGray" Fill="#99FFFFFF" Grid.Row="0" Grid.RowSpan="2"/>
<Ellipse Width="10" Height="10" Fill="LightGreen" Stroke="Green" Grid.Row="0"/>
<TextBlock Name="tb" Margin="2,15,2,0" Grid.Row="1">
<TextBlock Text="{Binding Position.X, StringFormat=G3}"/>;
<TextBlock Text="{Binding Position.Y, StringFormat=G3}"/>
</TextBlock>
</Grid>
</DataTemplate>
</d3:DataFollowChart>
</d3:ChartPlotter>
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 最大子序列和的接口函数(2)
- 最大子序列和的接口函数(3)
- 【剑指Offer】二叉树的深度
- 运行时间中的对数
- IIC协议
- 通过例子学习编写shell
- 【redis6.0.6】redis源码慢慢学,慢慢看 -- 第三天:MakeFile
- 继续学习Shell脚本(详细)
- 将linux终端的输出信息保存到log中
- UNIX网络编程卷1(第三版)一个简单的时间获取服务器的程序
- Python数据分析实战(3)Python实现数据可视化
- xresloader转表工具链增加了一些新功能(map,oneof支持,输出矩阵,基于模板引擎的加载代码生成等)
- 数据结构之树
- UNIX网络编程卷1(第三版)套接字编程简介
- UNIX网络编程卷1(第三版)readn,writen和readline函数