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

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

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

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

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

相关链接：

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

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

如何创建图表

将TeeChart脚本添加到您的html页面，最好是：

<script src="//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，一个具有控制画布参数的属性的子对象。