图表库TeeChart for JavaScript/HTML5入门教程（二）

yuyuyuyo
196 阅读3分钟

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

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

与其他编程环境（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（水平对齐：开始、结束、左、中心、右/垂直对齐：顶部、中间、底部、字母、悬挂、表意）


avatar
文章
阅读
粉丝