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

The Legend

    显示系列名称和系列点的指标称为图例，可以使用多个属性来自定义图例行为和外观。

Chart1.legend.visible = true;Chart1.legend.transparent = false;Chart1.legend.format.fill = “yellow”;

    Legend位置和方向：

Chart1.legend.position = “left”;   Chart1.legend.inverted = false;

• Chart1.legend.position(“top”,“bottom”,“right”)

• Chart1.legend.inverted（按正常顺序绘制项目）

    选择要在图例中显示的内容：

Chart1.legend.legendStyle = “values”;    // “auto”, “series”, “values”Chart1.legend.textStyle = “percentlabel”;

• Chart1.legend.legendStyle（自动，系列，值）

• Chart1.legend.textStyle（点值显示为百分比，并指向文本标签）

    字体和格式：

Chart1.legend.format.font.style = “20px Arial”;

    图表顶部和图表轴的边距：

Chart1.legend.align = 0;  Chart1.legend.padding = 5;

• Chart1.legend.align（距图表边缘的距离，百分比从0到100，0表示自动）

• Chart1.legend.padding（从图例到轴的距离）

    项目顶部的标题文字：

Chart1.legend.title.text = “My Legend”;Chart1.legend.title.visible = true;

    图例项旁边的符 ：

Chart1.legend.symbol.visible = true;Chart1.legend.symbol.width = 20;Chart1.legend.symbol.format.shadow.width = 5

    其他Legend属性：

Chart1.legend.fontColor = true;   // each item text is painted using its point or series colorChart1.dividing.fill = “blue”;    // draws lines between legend items

• Chart1.legend.fontColor（每个项目文本都使用其点或系列颜色绘制）

• Chart1.dividing.fill（在图例项之间绘制线条）

轴

    大多数系列数据都使用轴显示，以便从数据值转换为画布像素坐标，但是像Pie和Donut这样的系列不使用轴。

    图表中有四个默认轴：左，上，右和下。

var a = Chart1.axes.left;

    每个系列都有两个属性，用于控制使用哪些水平轴和垂直轴，默认情况下，水平轴为底部，垂直轴为左。 

Chart1.series.items[0].horizAxis = “top”;Chart1.getSeries(1).vertAxis = “right”;

    系列也可以使用两个轴显示：

Chart1.series.items[2].horizAxis = “both”;

    轴的可见性由Chart1.axes.visible属性全局控制，并使用可见轴单独控制：

Chart1.axes.visible = true;Chart1.axes.bottom.visible = true;

    默认情况下会自动控制秤，每个轴根据其关联的系列值和视觉属性计算其最小值和最大值。您可以覆盖轴自动缩放并手动设置它们：

var a = Chart1.axes.left;a.automatic = false;a.minimum = 50;a.maximum = 200;

    上面的代码相当于：

Chart1.axes.left.setMinMax( 50, 200 );

对数刻度

    轴标度默认为线性，log属性会确定轴使用自然对数缩放而不是线性：

Chart1.axes.left.log = true;

轴标签

    每个轴使用标签格式化属性（如font.size）会自动计算标签的最佳距离，还可以控制自定义标签更改轴增量属性：

Chart1.axes.bottom.increment = 100;

    默认增量为零，表示自动计算。标签可以显示系列值或系列点标签，这是使用labelStyle属性控制的，选项包括：

Chart1.axes.left.labels.labelStyle = “text”;

• 还有auto、none、value、mark、text 和 x

    当系列包含日期时间值时，使用Steven Levithan库根据dateFormat属性格式化标签。

Chart1.series.items[0].data.x = [ new Date() ];Chart1.axes.bottom.labels.dateFormat = “shortDate”;

    控制标签的其他属性：

Chart1.axes.left.labels.alternate = true;  // double quantity of labelsChart1.axes.right.labels.visible = false;  // show or hide labelsChart1.axes.left.labels.decimals = 3;    // output numbers with up to 3 fixed decimalsChart1.axes.bottom.labels.rotation = 90;    // 90 degree rotation

轴 格

    轴 格属性包括用于绘制跨越图表轴空间的 格线的格式。

Chart1.axes.left.grid.visible = true;

    当 格填充颜色不为空时， 格作为bands交替填充：

Chart1.axes.left.grid.format.fill = “red”;

     格线格式由笔触属性控制：

Chart1.axes.left.grid.format.stroke.size = 5;

    默认 格线是实线，lineDash属性显示点划线 格：

Chart1.axes.left.grid.lineDash = true;

    在本机支持画布划线笔划的浏览器上，上述代码等效于：

Chart1.axes.left.grid.format.stroke.dash = [10,5];

轴Ticks

    轴包含一个Ticks类型的innerTicks属性，它具有stroke属性。刻度线从标签到轴线绘制，内部刻度从轴向内显示。

Chart1.axes.bottom.innerTicks.visible = true;Chart1.axes.left.ticks.length = 9;Chart1.axes.top.ticks.stroke.fill = “blue”;

MinorTicks

    从tick到tick，minorTicks axis属性可用于显示小的子刻度：

Chart1.axes.left.minorTicks.visible = true;Chart1.axes.left.minorTicks.length = 2;Chart1.axes.left.minorTicks.count = 5;Chart1.axes.left.minorTicks.stroke.fill = “green”;

轴标题

    靠近轴，title属性用于显示标识轴的文本：

Chart1.axes.bottom.title.text = “Quantity”;Chart1.axes.bottom.title.text.format.font.fill = “red”;

轴定位

    轴的大小和位置默认是自动的。轴startPos和endPos属性控制轴的像素坐标。

标签：