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

翻译|使用教程|编辑:况鱼杰|2019-08-14 15:41:00.320|阅读 58 次

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

# 您正在找协同办公软件吗?点击这里站长给您推荐 #

相关链接:

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

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


背景

    图表背景外观由panel/面板子对象控制:

Chart1.panel.transparent = false;

    panel属性包含一个格式子属性来控制背景的外观:

Chart1.panel.format.gradient.visible = true;
Chart1.panel.format.shadow.color=”black”;
… etc

标题和页脚

    这两个图表属性用于在图表顶部和底部显示文本:

Chart1.title.text = “Hello”;
Chart1.footer.text = “World”;

    通过添加\ n换行分隔符来完成多行文本:

Chart1.title.text = “Hello \n World”;

    Title和Footer/标题和页脚是Annotation派生的对象,它们继承了format子属性:

Chart1.title.visible = true;
Chart1.title.transparent = false;
Chart1.title.format.gradient.visible = true;
Chart1.title.format.round.x=20;

将数据添加到系列

    使用Series对象将数据添加到图表中。

    多个系列可以存在于同一图表中。 每个系列可以是不同的类型(线,面,条,饼等),因此您可以混合使用多种样式。

    直接数据:向图表添加数据的最简单方法是在图表构建时传递一组值。

var Chart1=new Tee.Chart("canvas1", [ 5,6,2,9,1] );

    默认创建一个Tee.Bar类型的新系列对象,并将该数组赋值给series.data.values属性。传递多维数组时会创建多个系列:

var Chart1=new Tee.Chart("canvas1", [ [ 5,6,2,9,1], [ 8,4,3,7,5] ] );

    可以通过类型参数更改默认的系列样式Tee.Bar:

var Chart1=new Tee.Chart("canvas1", [ [ 5,6,2,9,1], [ 8,4,3,7,5] ] , Tee.Area);

创建系列:使用addSeries方法将系列手动添加到图表中。

var bar =Chart1.addSeries(new Tee.Bar());

    Series具有默认的title字符串属性,用于图表图例。

    将系列添加到图表时,标题将分配给Series加上Chart1.series.items数组中的系列索引(Series1,Series2等)。

    您可以覆盖默认标题:

bar.title = “My Data”;

    默认情况下,系列为空,它们不包含任何数据。出于测试目的,可以方便地添加随机值,例如:

Chart1.addSeries(new Tee.Line()).addRandom(1000);

    创建系列时可以内联指定数据:

Chart1.addSeries(new Tee.Pie( [ 10, 20, 30, 40 ] ));

    所有数据都存储在data属性数组系列中。您可以直接访问和修改数据:

var a = new Tee.Area();
Chart1.addSeries( a );
a.data.values =  [ 10, 20, 30, 40 ];

    每个系列点都有一个相关的文本标签。 默认情况下,标签为空,您可以使用data.labels属性修改它们:

a.data.labels =  [ “a”, “b”, “c”, “d” ];

    某些系列允许指定点位置或其他点参数。

    例如,Line和PointXY系列可以选择在特定的X轴坐标处显示每个线段或点:

var p = new Tee.PointXY();
p.data.values = [5, 7, 9];
p.data.x = [0.23, 14, 16];
Chart1.addSeries(p);

    像Bubble这样的其他系列有一个data.radius的数组,而Candle系列有data.open,data.close,data.high和data.low数组。

从其他来源添加数据

    在单独的脚本(teechart-table.js)中提供了几个辅助函数,能够从不同的源导入数据,例如,

来自textarea html元素:

Chart1.addSeries(new Tee.Bar(document.getElementById("data")) ); 7,Apples
 4
 3,Oranges
 9
 1,Banana
 6,Kiwis
 2

    来自表html元素:

Chart1.fromTable('table1', Tee.Bar, true, 0,0);...

    来自文本文件URL:

Chart1.addSeries(new Tee.Bar(“http://myweb.com/mydata.txt”));

    来自相同或不同图表中的另一个系列:

Chart1.series.items[0].data = Chart2.series.items[3].data;

    来自xml格式的文本:

 var b=Chart1.addSeries(new Tee.Bar());
 b.loadXML(document.getElementById("xml"));
...<textarea id="xml" rows="10" cols="60" "wrap="off">

    来自JSON格式的文本:

var b=Chart1.addSeries(new Tee.Bar());
b.loadJSON(document.getElementById("json"));

关注慧聚IT微信公众号 ☟☟☟,了解产品的最新动态及最新资讯。

dd2629f30d553d56ccaf7164fdcb784e-sz_28327.webp.jpgAxolot Data厂商夏日特惠,Word报表系列组件大放“价”!



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:Steema http://www.teechart.net/docs/TeeChartHTML5Tutorials.htm

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
title
相关厂商
相关产品
TeeChart for JavaScript/HTML5

基于HTML5画布的跨浏览器JavaScript图表库

在线
客服
在线
QQ
咨询
电话
173-8239-2642
购物车 反馈 返回
顶部
在线客服系统
live chat