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

翻译|使用教程|编辑:况鱼杰|2019-08-20 14:58:01.013|阅读 26 次

概述: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类,提供了几种图表样式,每种样式都是一个具有自己属性和方法的不同对象类。

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


关注慧聚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 电话咨询
400-700-1020
反馈
在线客服系统
live chat