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

翻译|使用教程|编辑:况鱼杰|2019-08-22 11:24:10.860|阅读 29 次

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

相关链接:

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

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


导出图表

    要从图表中获取PNG或JPEG图像,可以使用canvas toDataURL方法或包含的toImage函数:

Chart1.toImage( “img” );   
Chart1.toImage( “img” , “jpg”, 90 );

Chart1.toImage(img):用图表填充元素作为PNG图像。

Chart1.toImage(img,jpg,90):使用90%压缩的jpeg图像填充图像。

图表工具

    某些功能被实现为工具对象,可以将这些对象添加到图表工具数组属性中以激活它们。

注释

    可以使用注释工具在任何图表位置显示自定义文本:

Chart1.tools.add( new Tee.Annotation( Chart1, “Hello”, 50, 50 ) );

    注释对象具有格式,文本和位置属性。使用onclick事件时,注释也可以充当按钮:

var  b1=new Tee.Annotation(Chart1, “button 1”, 100, 100);
b1.cursor="pointer";
b1.onclick=function(button,x,y) { alert("Clicked button 1"); }
Chart1.tools.add( b1 );

提示

    将鼠标移到系列数据点上时,此工具显示系列数据。

var  tip=new Tee.ToolTip(Chart1);
tip.format.font.style="16px Tahoma";
Chart1.tools.add(tip);

    ToolTip工具提供onshow,onhide和ongettext事件。

游标

    可拖动光标线实现为工具对象:

  var t=new Tee.CursorTool(Chart1);
  t.format.stroke.size=2;
  t.format.stroke.fill="#BB0000";
  Chart1.tools.add(t);

    光标工具包括方向属性(将光标显示为水平线,垂直或两者)和拖动光标时触发的onchange事件。

拖动点

    DragTool实现鼠标/触摸点拖动。

  Chart1.tools.add(new Tee.DragTool(Chart1));

    包括改变和不变的事件,target属性确定拖动哪个系列和哪个系列点索引。

滑块

    通用滑块控件,可在图表内使用以更改任何值。

 var slider=new Tee.Slider(Chart1);
  slider.min=1;
  slider.max=100;
  slider.position=10;
  slider.thumbSize=12;
  slider.horizontal=true;
  slider.bounds.x=50;
  slider.bounds.y=10;
  slider.bounds.width=150;
  slider.bounds.height=20;
  slider.onChanging=function(slider,value) {
    Chart1.title.format.font.style = value.toFixed(0) + “ Verdana”;
    return value;
  }
  Chart1.tools.add(slider);

滚轮

    滚动工具显示另一个图表的简化视图,并允许滚动它。有关完整示例,请参阅此演示

系列动画

    通过改变轴刻度或旋转变换执行的简单动画:

  var a=new Tee.SeriesAnimation(Chart1);
  a.duration=500; // milliseconds
  Chart1.tools.add(a);

    可以通过html按钮调用启动动画的animate方法:

    TeeChart for JavaScript/HTML5的教程到这里就结束了,希望这些教程对您有帮助,如果您还需要其他关于TeeChart产品的教程,可以点击图表控件公司Steema2019文章合集>>查看。


关注慧聚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