图表库TeeChart for JavaScript/HTML5实用教程（二）-控件新闻-慧都网

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

翻译|使用教程|编辑：况鱼杰|2019-08-13 16:30:18.787|阅读 291 次

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

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接：

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命名空间

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

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类提供以下属性：

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”;