其他分享
首页 > 其他分享> > TeeChart Pro VCL教程:使用TeeChart Pro VCL动画活动量表

TeeChart Pro VCL教程:使用TeeChart Pro VCL动画活动量表

作者:互联网

原文链接:http://steema.com/wp/blog/2017/05/15/animated-activity-gauge-with-teechart-pro-vcl/

    TeeChart Pro VCL/FMX是一款主流的图表制作工具。提供了数百种用于可视化的2D、3D图形样式、56种数学、统计和金融函数,以及不限数量的坐标轴和30种调色板组件。    


    目前TeeChart Pro for VCL / FMX没有可用于本文章将会展示如何使用另一个系列类型和一些技巧去创建活动量表。

    需要用到甜甜圈类型,我们要在图表上添加尽可能多的Donut系列作为我们想要的活动。直接从图表编辑器本身入手。    

1566976873.png

    当在表格中添加了图表并且添加的是不同的甜甜圈系列,似乎无法获得所需的结果,但我们会看到...... 这时候,首先要做的是将图表设置为2D,隐藏标题和传奇,我们也会隐藏每个系列的标记。我们在这里:    

image2.png

    现在,需要修改一个将开始进行更改的重要属性。它是名为Multiple Pies的属性,在编辑器 - >系列 - > Series1 - > Donut - > Options - > Multiple Pies。默认情况下,此项设置为自动,我们会将所有系列更改为禁用。

    修改此属性后,我们在图表中看起来只有一个甜甜圈系列,如此处所示。

1566977090.png

    接着修改另一个将更改图表的重要属性,它是名为Hole%的属性,我们在格式选项卡中的每个系列的选项中找到它。在这里,要为每个Donut系列的孔设置不同的百分比值,在不同系列之间分配大小。第一个系列必须包含较小的孔尺寸,我们可以设置值60%,在第二个系列中(在我们有三个系列的情况下)我们将设置值74%,第三个88%。 结果将是:

1566977210.png

    现在,您所要做的就是为每个系列隐藏笔,或者设置不同的颜色和大小,我们将看到我们想要的图表。

image5-300x296.png

    作为系列或图表的一个额外特征,我将在中心添加一个文本,它将显示活动的价值。为此,我可以使用TeeChart中已有的注释工具,也可以通过TChart编辑器创建/添加。将注释对齐设置为居中并格式化字体。

1566977328.png

    这个系列类型(活动量表)的一个重要特征是它的动画。TeeChart Pro为不同的系列类型合并了几个动画,但在这种情况下,由于正在创建的是一种完全个性化的系列,所以将手动创建动画。

  1. 要在表单中添加三个TTimer对象,每个系列一个,将它们设置为Enabled为False并定义Interval为10。

  2. 还可以添加一个Button组件,这是用来启动动画的组件。

  3. 接着给它功能;我们将通过代码执行后续步骤。

    通过代码做的第一件事是创建一个方法,将会重置并初始化所有Series值,名为ResetValues, 代码:

procedure TActivityGaugeForm.ResetValues;
var i : integer;
begin
  ChartTool1.Text := '0 %';
  Chart1.Hover.Visible := false;

  for i := 0 to Chart1.SeriesCount-1 do
  begin
    Chart1[i].FillSampleValues(2);
    Chart1[i].YValue[0] := 100;
    Chart1[i].YValue[1] := 0;
    Chart1[i].ValueColor[0] := Series1.Pen.Color;
  end;
end;

    将从Application的CreateForm事件中调用此方法,并且每次单击Button1时也是如此:

procedure TActivityGaugeForm.FormCreate(Sender: TObject);
begin
  ResetValues;
end;

procedure TActivityGaugeForm.Button1Click(Sender: TObject);
begin
  ResetValues;
  Timer1.Enabled := true;
  Button1.Enabled := false;
end;

最后,唯一缺少的是在相应的Timer事件中添加生成Series动画的代码:

procedure TActivityGaugeForm.Timer1Timer(Sender: TObject);
begin
  Series1.YValue[0] := Series1.YValue[0]-1;
  Series1.YValue[1] := Series1.YValue[1]+1;

  ChartTool1.Text := round(Series1.YValue[1]).ToString() + ' %';

  if (Series1.YValue[1] = 90) then
  begin
    Timer1.Enabled := false;
    Timer2.Enabled := true;
  end;
end;

procedure TActivityGaugeForm.Timer2Timer(Sender: TObject);
begin
  Series2.YValue[0] := Series2.YValue[0]-1;
  Series2.YValue[1] := Series2.YValue[1]+1;

  ChartTool1.Text := round(Series2.YValue[1]).ToString() + ' %';

  if (Series2.YValue[1] = 75) then
  begin
    Timer2.Enabled := false;
    Timer3.Enabled := true;
  end;
end;

procedure TActivityGaugeForm.Timer3Timer(Sender: TObject);
begin
  Series3.YValue[0] := Series3.YValue[0]-1;
  Series3.YValue[1] := Series3.YValue[1]+1;

  ChartTool1.Text := round(Series3.YValue[1]).ToString() + ' %';

  if (Series3.YValue[1] = 60) then
  begin
    Timer3.Enabled := false;
    Button1.Enabled := true;
  end;
end;

完成以上所有操作之后,需要运行应用程序并查看结果。

Result.gif

标签:begin,end,Enabled,Pro,VCL,TeeChart,系列,Series1,YValue
来源: https://blog.csdn.net/yuyuyuyo/article/details/100323369