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

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

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

• f.stroke.fill（在文本周圍繪制輪廓）

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

• f.textAlign（水平對齊：開始、結束、左、中心、右/垂直對齊：頂部、中間、底部、字母、懸掛、表意）

關注慧聚IT微信公眾號 ???，了解產品的最新動態及最新資訊。