图表库TeeChart for JavaScript/HTML5实用教程（二）

TeeChart for JavaScript/HTML5是基于HTML5画布的跨浏览器JavaScript图表库，本教程将会介绍如何使用TeeChart for Javascript库创建图表和图形。

    TeeChart for JavaScript/HTML5是一个100%的 JavaScript/ HTML5图表库，可以在所有兼容的浏览器中以原生的Javascript格式使用HTML5 Canvas绘制图表。 

TeeChart for JavaScript/HTML5最新试用版

    将图表添加到您的 页或应用程序既有趣又简单，请参阅一分钟的入门指南，或者使用在线演示查看。

    与其他编程环境（Java，.NET，Delphi VCL / FireMonkey等）相比，TeeChart Javascript api实现了一个重要的功能子集，以最大限度地减少脚本大小和编码复杂性。

    当前脚本大小为64KB（缩小）和13KB（gzip）。

Tee命名空间

    完整代码包含在单个Tee标识符（命名空间）周围，以避免混乱浏览器Window全局空间。 面向对象方式中的几个类存在于Tee名称空间内，是Tee.Chart定义图表的主类。

The Canvas

    默认情况下，使用HTML5 Canvas元素显示图表，应该初始化主类Tee.Chart，将

<canvas id="canvas1" width="300" height="200"></canvas>

使用Canvas ID：

var Chart1=new Tee.Chart("canvas1");

或者使用元素ID：

var Chart1=new Tee.Chart(document.getElementById("canvas1"));

可以在不传递任何canvas参数的情况下创建隐藏图表：

var Chart1=new Tee.Chart();

画画

    调用draw方法时，图表会呈现给画布：

Chart1.draw();

界限和位置

canvas中图表的默认xy位置是0,0（左上角），默认大小与关联的Canvas相同。

您可以通过更改图表边界属性来覆盖它们：

Chart1.bounds.x=50; Chart1.bounds.y=20;Chart1.bounds.width=200;Chart1.bounds.height=150;

格式

    大多数对象（如Series，Annotations和chart子对象）都包含一个format属性，将所有视觉属性分组在一个共同的位置。Format类提供以下属性：

fill：css字符串格式的颜色，例如：＃123456，rgb（255,0,0），rgba（0,255,0,0.5），blue

Chart1.panel.format.fill = “blue”;

round：矩形角圆度的像素数（x：水平，y：垂直）

Chart1.panel.format.round = { x:10, y:10 }Chart1.legend.format.round.y = 5;

透明度：半玻璃效果的数量，从0到1（默认为零）。

Chart1.legend.format.transparency = 0.5;

shadow：用于控制填充形状或描边线后面的阴影可见性的属性。

  var s = Chart1.panel.format.shadow;   s.visible = true;   s.width = 4;            s.height = 4;       s.blur = 5;   s.color = “silver”;

• s.width（对于左侧阴影可以是负数）

• s.height（对于顶部阴影可能是负数）

gradient：使用渐变颜色填充形状的属性：

 var g = Chart1.panel.format.gradient;  g.visible = true;  g.colors = [ “red”, “yellow”, “green” ];    g.stops = [ 0, 0.1, 1 ];    g.direction = “topbottom”;

• g.colors（颜色数组）

• g.stops（每种颜色的百分比从0到1，默认为空，自动/bottomtop、leftright、rightleft、radial、diagonalup、diagonaldown）

stroke：用于在填充形状周围绘制线条和轮廓的属性：

 var s = Chart1.panel.format.stroke;    s.fill = “black”;    s.size = 4;                  s.join = “round”;        s.cap = “square”;       s.dash = [ 5,10 ];        s.gradient.visible = true;

• s.size（线的粗细）

• s.join（段连接：圆形、斜接、斜面）

• s.cap（结束行终止符square、butt、round）

• s.dash（dot-dash …像素数组：默认为null以绘制实线）

• s.gradient.visible（具有颜色，方向等的渐变对象）

font：显示文本的属性：

  var f = Chart1.title.format.font;   f.style = “22px Verdana”;      f.fill = “blue”;   f.shadow.visible = true;       f.stroke.fill = “white”;            f.gradient.visible = true;        f.textAlign = “center”;         f.baseLine = “top”;

• f.style（或粗斜体14px Tahoma/bold italic 14px Tahoma等）

• f.shadow.visible（文字drop-shadow）

• f.stroke.fill（在文本周围绘制轮廓）

• f.gradient.visible（用渐变填充文本而不是使用font.fill）

• f.textAlign（水平对齐：开始、结束、左、中心、右/垂直对齐：顶部、中间、底部、字母、悬挂、表意）

标签：