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

TeeChart for JavaScript/HTML5是基于HTML5画布的跨浏览器JavaScript图表库，本教程将会介绍如何使用TeeChart for Javascript库创建图表和图形。

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

TeeChart for JavaScript/HTML5最新试用版

轴墙

    绘制轴的矩形空间称为后墙，使用walls.back属性提供格式：

Chart1.walls.back.visible = true;Chart1.walls.back.transparent = false;Chart1.walls.back.format.gradient.visible = true;

系列

    继承了一个通用的Series类，提供了几种图表样式，每种样式都是一个具有自己属性和方法的不同对象类。

• 线
  

• bars

• areas

• pie

• bubble

小贴士：点击以上系列可以获得该系列的示例，点击TeeChart for JavaScript/HTML5示例还可以获得更多的演示图表。

系列标志

    标志属性在系列点附近显示文本注释：

var s = new Tee.Bar();s.marks.visible = true;s.marks.style = “percent”;

系列和颜色

    图表具有调色板属性（字符串格式的颜色数组），系列使用此调色板绘制其点，按图表图例显示系列项目符 。

Chart1.palette = [ “red”, “blue”, “green”, “yellow” ];

    当系列中存在比调色板大小更多的系列或更多点时，调色板中的颜色以循环方式重复使用。

    系列还包含一系列颜色以覆盖图表调色板。默认情况下，它是一个null空数组，因此它们共享图表调色板。

缩放和滚动

    可以通过手动代码或鼠标/触摸事件来缩放和滚动图表。默认行为是在轴内拖动鼠标右键进行滚动，使用鼠标左键拖动矩形进行缩放/缩放（缩放拖动到右下方向，然后拖放到左上方向）。

    这可以使用图表缩放和滚动属性覆盖：

Chart1.zoom.enabled = true;Chart1.zoom.mouseButton = 0;  Chart1.zoom.stroke.fill = “yellow”;Chart1.scroll.enabled = true;Chart1.scroll.mouseButton = 2;Chart1.scroll.direction = “horizontal”;

• Chart1.zoom.mouseButton（0 =左键，1 =中键，2 =右键）

• Chart1.scroll.direction（可以是垂直或两者）

标签：