【KingFusion】用趋势曲线组件实现实时曲线的步骤
哈喽，大家好，我是雷工！
本节学习测试用KingFusion趋势曲线组件实现电流的实时曲线的展示。
一、效果演示：
展示实时曲线的运行效果，效果为KingFunsion3.6通过KingIOServer连接现场系统中实际数据的演示效果。
二、趋势曲线组件简介
趋势曲线组件用来反应数据变量随时间的变化情况。
趋势曲线有两种：实时趋势曲线和历史趋势曲线。这两种曲线外形都类似于坐标纸，X轴代表时间，Y轴代表变量值。所不同的是，在页面程序运行时，实时趋势曲线随时间变化自动卷动，以快速反应变量的变化，但是不能随时间轴“回卷”，不能查阅变量的历史数据；历史趋势曲线可以完成历史数据的查看工作，但它不会自动卷动，而需要通过命令语言来辅助实现查阅功能。一个页面中可定义数量不限的趋势曲线，在同一个趋势曲线中最多可同时显示64个变量的变化情况。
1、创建趋势曲线
在页面编辑器中点击【图表组件】，进入到图表组件列表中然后选择【趋势曲线】，把趋势曲线拖到绘制区，创建一个趋势曲线，如下图。
三、趋势曲线属性
在绘制区双击选中添加的趋势曲线，点击右侧的属性-选项卡，即可进入趋势曲线的属性界面，如下图：
1、基本属性
名称：组件对象的名称，此名称不能以数字开头，长度在32个字符以内，其中可包括字母、数字以及下划线，并且不能为空；不能包括以下非法字符：, : ; + - * / % # & ! ~ | ^ <> = {} [] () ?
类型：说明组件的类型，类型为趋势曲线。
描述：添加本组件的描述信息，可以中文或英文信息。
能否被访问：说明本组件是否能被访问，只有“是”和“否”两种模式。
2、位置
横坐标：本组件在画面上的横向位置坐标，以像素为单位；可以输入负值。
纵坐标：本组件在画面上的纵向位置坐标，以像素为单位；可以输入负值。
3、大小
宽度：设置本组件在画面上的宽度，以像素为单位。范围控制在0-32000。
高度：设置本组件在画面上的高度，以像素为单位。范围控制在0-32000。
4、模式
曲线模式：设置趋势曲线的曲线模式，可以从【实时模式】和【历史模式】两种模式中选择。
刷新频率(ms)：设置趋势曲线的刷新频率，单位为毫秒。
刷新模式：设置趋势曲线的刷新模式，可以从“自由刷新”和“自作刷新”两种模式中选择。
5、标题属性
标题可见性：是否显示标题。
6、绘图区
绘图区数量：设置趋势曲线的绘图区数量。
7、尺寸策略
水平策略：配置组件在容器中的延展属性。
垂直策略：配置组件在容器中的延展属性。
8、其他属性
是否被锁住：设置本组件是否可以操作，设置为”否“表示可操作，反之不可操作。
是否显示：设置本组件是否显示。
运行是否显示：设置本组件运行时是否显示。
Tooltip是否激活：设置是否激活Tooltip。
提示信息：设置趋势曲线是否显示提示信息。
9、安全策略
优先级：组件所具有的优先级。
安全区：组件所在的安全区。
四、标题属性
选中趋势曲线后，右键选择编辑，点击标题，即可进入标题属性配置界面：
标题栏属性界面如下所示，属性比较常规，可以尝试修改属性查看修改效果：
五、数据轴属性
1、在绘制区选中趋势曲线组件—>右键—>点击编辑—>点击数据轴末端【Y轴名称】，如下图中红框所示，即可进入数据轴属性界面：
2、在数据轴属性界面，可以修改调整“数据轴位置”，“小数位数”，“Y轴线颜色”，“Y轴字体颜色”，“Y轴名称”等属性。
六、时间轴属性
与数据轴一样，在绘制区选中趋势曲线组件—>右键—>点击编辑—>点击时间轴末端【X轴名称】，即可进入时间轴属性界面，时间轴属性如下：
可以修改调整对应属性。
七、绘图区属性
在绘制区选中趋势曲线组件，右键，点击编辑，点击绘图区，即可进入绘图区属性界面，修改对应属性：
八、曲线属性
选中趋势曲线之后，右键编辑然后点击绘图区的曲线，在画面右侧就出现曲线属性配置界面，如图所示。
设置曲线数据源，曲线颜色等参数。
九、图例属性
选中趋势曲线之后，右键编辑然后点击箭头指向的图例，在画面右侧就出现曲线图例区属性配置界面，如图所示。
设置图例的位置及图例文本颜色。
十、方法
1 、AddCurve1()
功能：添加数据源为某变量的曲线
调用格式：
组件名.AddCurve1(AreaName, TimeAxisName, DataAxisName, VariateName);
参数：
AreaName：曲线所在绘图区名称，字符串类型，如CharArea1、CharArea2、 CharArea3、CharArea4
TimeAxisName：曲线所关联时间轴名称，字符串类型,如TimeAxis1、 TimeAxis2
DataAxisName：曲线所关联数据轴名称，字符串类型,如DataAxis1、DataAxis2……DataAxis16
VariateName：曲线所关联的变量名，字符串类型，如为空，则该曲线不关联任何变量
返回值:undefined
示例：
// 其中TrendChart1是趋势曲线图素的名称
TrendChart1.AddCurve1("ChartArea1", "TimeAxis1", "DataAxis1", "Tag1");
2 、ChangeCurveDataSource()
功能：变更曲线关联的变量
调用格式：
组件名.ChangeCurveDataSource(CurverName, NewDataSourceName);
参数：
CurverName：曲线名称，字符串类型
NewDataSourceName：关联的新数据源名称，字符串类型
返回值:
True：变更成功
False：变更失败
示例：
// 更换曲线Curve1的关联数据源为Datasource1
TrendChart1.ChangeCurveDataSource("Curve1", "Datasource1");
3 、DeleteCurve()
功能：删除曲线
调用格式：
组件名.DeleteCurve(CurveName);
参数：
CurveName：曲线名称，字符串类型。
返回值:
True：删除成功
False：删除失败
示例：
// 删除曲线Curve1
TrendChart1.DeleteCurve("Curve1");
4 、ClearCurrentCurves()
功能：清除当前所绘制的曲线
调用格式：
组件名.ClearCurrentCurves();
参数：none
返回值:
True：清空成功
False：清空失败
示例：
// 注:此清除函数仅对实时曲线有效果。
TrendChart1.ClearCurrentCurves();
5 、SetLegendltemCustomText()
功能：设置图例区子项自定义文本
调用格式：
组件名.SetLegendltemCustomText(CurveName, LegendltemCustomTex, Arealndex)
参数：
CurveName：曲线名称，字符串类型
LegendltemCustomTex：图例子项文本，字符串类型
Arealndex：绘图区序号
返回值:
True：清空成功
False：清空失败
示例：
// 设置图例区子项自定义文本为Curve1
TrendChart1.SetLegendltemCustomText("Curve1","曲线1",0);
6、 SetTimeAxisText()
功能：设置时间轴文本的倾斜角度
调用格式：
组件名.SetTimeAxisText(TimeAxisName, TetAngl, Arealndex);
参数：
TimeAxisName ：时间轴名称，字符串类型
TetAngl：显示的倾斜角度，整型
Arealndex：绘图区序号
返回值:undefined
示例：
// 设置时间轴TimeAxis1的倾斜角度为10.绘图序号为0
TrendChart1.SetTimeAxisText("TimeAxis1", 10, 0);
7、 SetDataAxisType()
功能：设置数据轴类型
调用格式：
组件名.SetDataAxisType(DataAxisName, ShowType, AreaIndex);
参数：
DataAxisName：数据轴名称，字符串类型
ShowType：数据轴类型
AreaIndex：绘图区序号
1 ：实际值
2：自适应
返回值:
数据轴类型：1，实际值；2，自适应
执行结果：True：设置成功；False：设置失败
示例：
// 设置数据轴DataAxis1的类型为实际值，绘图区序号0
TrendChart1.SetDataAxisType("DataAxis1", 1, 0);
8 、SetDataAxisRange()
功能：设置数据轴范围，对自适应类型的数据轴无效
调用格式：
组件名.SetDataAxisRange(DataAxisName, MinValue, MaxValue, AreaIndex);
参数：
DataAxisName：数据轴名称，字符串类型
MinValue：数据轴最小值，单位为数据轴所设单位，如果是百分比模式，单位就是%。百分比类型的数据轴MinValue可以<0%，浮点型
MaxValue：数据轴最大值，单位为数据轴所设单位，如果是百分比模式，单位就是%。百分比类型的数据轴MaxVaue可以>10%，浮点型
AreaIndex：绘图区序号
返回值:undefined
示例：
// 设置数据轴DataAxis1的范围为-10~160，绘图区序号0
TrendChart1. SetDataAxisRange("DataAxis1", -10, 160, 0);
9 、SetDataAxisDecimalNum()
功能：设置数据轴显示值的小数位数
调用格式：
组件名.SetDataAxisDecimalNum(DataAxisName, DecimalNum, Areandex);
参数：
DataAxisName：数据轴名称，字符串类型
DecimalNum：设置的小数位个数，整型
Areandex：绘图区序号
返回值:undefined
示例：
// 设置数据轴DataAxis1显示值的小数位数为2位，绘图区序号0
TrendChart1.SetDataAxisDecimalNum("DataAxis1", 2, 0);
10、 setDatas()
功能：设置历史模式趋势曲线数据
调用格式：
组件名.setDatas(data);
参数：
data：曲线数据
返回值:undefined
示例：
//一个绘图区一条曲线
var data = [
[
[
['2020-03-10 12:00:00', 10],
['2020-03-10 12:01:00', 11],
['2020-03-10 12:10:00', 20],
['2020-03-10 12:20:00', 30],
['2020-03-10 12:30:00', 40],
['2020-03-10 12:40:00', 50]
]
]
];
TrendChart1.setDatas(data);
//一个绘图区两条曲线
var data = [
[
[
['2020-03-10 12:00:00', 10],
['2020-03-10 12:01:00', 11],
['2020-03-10 12:10:00', 20],
['2020-03-10 12:20:00', 30],
['2020-03-10 12:30:00', 40],
['2020-03-10 12:40:00', 50]
],
[
['2020-03-10 12:00:00', 20],
['2020-03-10 12:01:00', 21],
['2020-03-10 12:10:00', 30],
['2020-03-10 12:20:00', 40],
['2020-03-10 12:30:00', 50],
['2020-03-10 12:40:00', 60]
]
]
];
TrendChart1.setDatas(data);
//两个绘图区两条曲线
var data = [
[
[
['2020-03-10 12:00:00', 10],
['2020-03-10 12:01:00', 11],
['2020-03-10 12:10:00', 20],
['2020-03-10 12:20:00', 30],
['2020-03-10 12:30:00', 40],
['2020-03-10 12:40:00', 50]
]
],
[
[
['2020-03-10 12:00:00', 20],
['2020-03-10 12:01:00', 21],
['2020-03-10 12:10:00', 30],
['2020-03-10 12:20:00', 40],
['2020-03-10 12:30:00', 50],
['2020-03-10 12:40:00', 60]
]
]
];
TrendChart1.setDatas(data);
十一、后记
以上为KingFusion用趋势曲线组件实现实时曲线的步骤。