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

翻译|使用教程|编辑:况鱼杰|2019-08-15 17:18:18.420|阅读 110 次

概述: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 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属性控制轴的像素坐标。


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

dd2629f30d553d56ccaf7164fdcb784e-sz_28327.webp.jpg

Axolot Data厂商夏日特惠,Word报表系列组件大放“价”!



标签:

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

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

登录 慧都网发表评论


暂无评论...

为你推荐

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

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

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