TeeChart for JavaScript/HTML5是一個(gè)100%的 JavaScript/ HTML5圖表庫(kù)，可以在所有兼容的瀏覽器中以原生的Javascript格式使用HTML5 Canvas繪制圖表。 

點(diǎn)擊下載TeeChart for JavaScript/HTML5最新試用版

    將圖表添加到您的網(wǎng)頁(yè)或應(yīng)用程序既有趣又簡(jiǎn)單，請(qǐng)參閱一分鐘的入門(mén)指南，或者使用在線演示查看。

 ;   與其他編程環(huán)境（Java，.NET，Delphi VCL / FireMonkey等）相比，TeeChart Javascript api實(shí)現(xiàn)了一個(gè)重要的功能子集，以最大限度地減少腳本大小和編碼復(fù)雜性。

    當(dāng)前腳本大小為64KB（縮小）和13KB（gzip）。

Tee命名空間

    完整代碼包含在單個(gè)標(biāo)識(shí)符（命名空間）周圍，以避免混亂瀏覽器Window全局空間。 面向?qū)ο蠓绞街械膸讉€(gè)類存在于Tee名稱空間內(nèi)，是定義圖表的主類。

The Canvas

    默認(rèn)情況下，使用HTML5 Canvas元素顯示圖表，應(yīng)該初始化主類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參數(shù)的情況下創(chuàng)建隱藏圖表：

var Chart1=new Tee.Chart();

畫(huà)畫(huà)

    調(diào)用draw方法時(shí)，圖表會(huì)呈現(xiàn)給畫(huà)布：

Chart1.draw();

界限和位置

canvas中圖表的默認(rèn)xy位置是0,0（左上角），默認(rèn)大小與關(guān)聯(lián)的Canvas相同。

您可以通過(guò)更改圖表邊界屬性來(lái)覆蓋它們：

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

格式

    大多數(shù)對(duì)象（如Series，Annotations和chart子對(duì)象）都包含一個(gè)屬性，將所有視覺(jué)屬性分組在一個(gè)共同的位置。Format類提供以下屬性：

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

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

round：矩形角圓度的像素?cái)?shù)（x：水平，y：垂直）

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

透明度：半玻璃效果的數(shù)量，從0到1（默認(rèn)為零）。

Chart1.legend.format.transparency = 0.5;

shadow：用于控制填充形狀或描邊線后面的陰影可見(jiàn)性的屬性。

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

• s.width（對(duì)于左側(cè)陰影可以是負(fù)數(shù)）

• s.height（對(duì)于頂部陰影可能是負(fù)數(shù)）

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（顏色數(shù)組）

• g.stops（每種顏色的百分比從0到1，默認(rèn)為空，自動(dòng)/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（線的粗細(xì)）

• s.join（段連接：圓形、斜接、斜面）

• s.cap（結(jié)束行終止符square、butt、round）

• s.dash（dot-dash ...像素?cái)?shù)組：默認(rèn)為null以繪制實(shí)線）

• s.gradient.visible（具有顏色，方向等的漸變對(duì)象）

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（水平對(duì)齊：開(kāi)始、結(jié)束、左、中心、右/垂直對(duì)齊：頂部、中間、底部、字母、懸掛、表意）

關(guān)注慧聚IT微信公眾號(hào) ???，了解產(chǎn)品的最新動(dòng)態(tài)及最新資訊。