图表库TeeChart for JavaScript/HTML5实用教程(二)

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

概述: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(水平对齐:开始、结束、左、中心、右/垂直对齐:顶部、中间、底部、字母、悬挂、表意


关注慧聚IT微信公众号 ☟☟☟,了解产品的最新动态及最新资讯。


dd2629f30d553d56ccaf7164fdcb784e-sz_28327.webp.jpg

Axolot Data厂商夏日特惠,Word报表系列组件大放“价”!



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:Steema http://www.teechart.net/docs/TeeChartHTML5Tutorials.htm

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
title
相关厂商
相关产品
TeeChart for JavaScript/HTML5

基于HTML5画布的跨浏览器JavaScript图表库

在线
客服
在线
QQ
咨询
电话
173-8239-2642
购物车 反馈 返回
顶部
在线客服系统
live chat