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

翻译|使用教程|编辑:况鱼杰|2019-08-12 16:06:56.510|阅读 171 次

概述:TeeChart for JavaScript/HTML5是基于HTML5画布的跨浏览器JavaScript图表库,本节是教程的入门教程,帮助您了解如何创建图表以及图表的属性。

# 您正在找协同办公软件吗?点击这里站长给您推荐 #

相关链接:

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

点击下载TeeChart for JavaScript/HTML5最新试用版


如何创建图表

  • 将TeeChart脚本添加到您的html页面,最好是:

<script src="http://steema.us/files/jscript/src/teechart.js" type="text/javascript"></script>
  • 添加html5 canvas标签以显示图表:

<canvas id="canvas" width="300" height="200">
This browser does not seem to support HTML5 Canvas.
</canvas>
  • 添加代码以创建包含示例数据的图表:

<script type="text/javascript">
function draw() {
  Chart1=new Tee.Chart("canvas");
  Chart1.addSeries(new Tee.Pie([5,3,2,7,1]) );
  Chart1.draw();
}
</script>
  • 从适当的位置调用draw()函数,例如在body的onload事件中:

<body onload="draw()">

结果输出图表是:

截图未命名.jpg

上面的代码执行以下操作:

  • 创建一个Chart对象,将画布id作为参数传递。

  • 调用Chart addSeries方法,传递一个新的Pie系列对象,其中填充了一组数据编号。

  • 调用Chart draw()方法生成并将图表显示为canvas。

注意:

  • Tee前缀指的是TeeChart.js脚本中的所有内容,此前缀可避免与有相同全局命名空间的对象冲突。

  • canvas id参数也可以是DOM对象,例如:new Tee.Chart(document.getElementById(canvas))。

  • 在这个限量版本中,可用的系列样式是Line,Bar,HorizBar,PointXY,Area,HorizArea,Pie,Donut和Bubble。

  • 许多系列可以添加并混合到同一个图表中,但将Pie或Donut与非圆形样式混合可能在视觉上不太愉快。

图表的主要属性和类

    Chart对象包括以下属性和子对象:

  • Chart1.series,Tee.Series派生对象的列表,如Line,Bar,Pie等。

    系列对象用于分组和显示数据值,其中许多可以添加到同一个图表中。

    使用Tee.Series构造函数创建系列的几种方法:

    空系列,传递Chart参数:var Series1 = new Tee.Line(Chart1);

    创建并填充数据:var Series1 = Tee.Line(Chart1,[1,2,3,4,5]);

  • Chart1.title,在上方显示文本。

  • Chart1.footer,在底部显示文本。

  • Chart1.legend,显示系列列表或给定系列值列表。

  • Chart1.axes,一个有四个轴的子对象:Left,Top,Right和Bottom。

  • Chart1.panel,定义图表背景属性。

  • Chart1.walls,一个有四个墙的子对象:左,下,右和后。

  • Chart1.tools,Tee.Tool派生对象的列表,如CursorTool或Annotations。

  • Chart1.zoom,用于控制鼠标/触摸拖动的属性,用于缩放图表轴。

  • Chart1.scroll,用于控制鼠标/触摸拖动的属性,用于滚动图表内容。

  • Chart1.aspect,一个具有控制画布参数的属性的子对象。


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

dd2629f30d553d56ccaf7164fdcb784e-sz_28327.webp.jpg

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



标签:

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

文章转载自:Steema http://www.steema.com/files/public/teechart/html5/jscript/docs/TeeChart%20for%20Javascript%20Getting%20Started%20Guide.html

登录 慧都网发表评论


暂无评论...

为你推荐

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

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

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