TeeChart Pro VCL Q & Tutorial: Using TeeChart Pro VCL scale animation activities

    TeeChart Pro VCL / FMX is a mainstream charting tools. Providing hundreds of 2D, 3D graphic style, 56 kinds of mathematical, statistical and financial functions for visualization, and an unlimited number of axes and 30 palette components.    


    Currently TeeChart Pro for VCL / FMX not be used in this article will show you how to use another type of family activities and some tips to create scale.

    Need to use the type of donuts, we want to add as much Donut series on the chart as we wanted activities. Starting directly from the diagram editor itself.    

1566976873.png

    When you add a chart in the table and add a different series of donuts, can not seem to get the desired result, but we'll see ...... this time, the first thing to do is to set 2D graph , hide the title and legend, we will hide each series of marks. We are here:    

image2.png

    Now, we will begin a need to modify important attributes change. It is a property called Multiple Pies, the editor -> Series -> Series1 -> Donut -> Options -> Multiple Pies. By default, this is set to automatic, we will all be changed to disable series.

    After this property is modified, we seem only a donut series, as shown here in the chart.

1566977090.png

    Another important change will then modify the properties of the chart, which is called the Hole% of the property, we each series of options in the Format tab to find it. Here, a different percentage value to be set for the aperture of each Donut series, the size distribution between the different series. The first series must contain a smaller pore size, we can set the value of 60% in the second series (in the case where we have three series) We will set the value of 74%, the third 88%. The result will be:

1566977210.png

    Now, all you have to do is hide the pen for each series, or set a different color and size, we will see a chart that we want.

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;

After all the above operations, it is necessary to run the application and view the results.

Result.gif


Guess you like

Origin blog.51cto.com/14477114/2434813