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

yuyuyuyo
218 阅读3分钟

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

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 color
Chart1.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 labels
Chart1.axes.right.labels.visible = false;  // show or hide labels
Chart1.axes.left.labels.decimals = 3;    // output numbers with up to 3 fixed decimals
Chart1.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属性控制轴的像素坐标。


avatar
文章
阅读
粉丝