图表库TeeChart for JavaScript/HTML5入门教程(五)

150 阅读1分钟

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

轴墙

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

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

系列

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

小贴士:点击以上系列可以获得该系列的示例,点击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(可以是垂直或两者)