图表库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最新试用版 

背景

    图表背景外观由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);...

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"));

标签：