图表库TeeChart for JavaScript/HTML5入门教程（三）

yuyuyuyo
179 阅读3分钟

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

背景

图表背景外观由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")) );
<textarea id="data" rows="20" cols="20" wrap="off">
 7,Apples
 4
 3,Oranges
 9
 1,Banana
 6,Kiwis
 2</textarea>

来自表html元素：

Chart1.fromTable('table1', Tee.Bar, true, 0,0);
<table id=”table1”>...</table>

来自文本文件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">
<series name="Friends" color="Blue" metric="Quantity">
 <point name="Facebook" value="123"/>
 <point name="Twitter" value="456"/>
 <point name="Google+" value="789"/>
</series>
</textarea>

来自JSON格式的文本：

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


avatar
文章
阅读
粉丝