提供3000多款全球软件/控件产品
针对软件研发的各个阶段提供专业培训与技术咨询
根据客户需求提供定制化的软件开发服务
全球知名设计软件,显著提升设计质量
打造以经营为中心,实现生产过程透明化管理
帮助企业合理产能分配,提高资源利用率
快速打造数字化生产线,实现全流程追溯
生产过程精准追溯,满足企业合规要求
以六西格玛为理论基础,实现产品质量全数字化管理
通过大屏电子看板,实现车间透明化管理
对设备进行全生命周期管理,提高设备综合利用率
实现设备数据的实时采集与监控
利用数字化技术提升油气勘探的效率和成功率
钻井计划优化、实时监控和风险评估
提供业务洞察与决策支持实现数据驱动决策
翻译|使用教程|编辑:况鱼杰|2019-08-14 15:41:00.320|阅读 253 次
概述:TeeChart for JavaScript/HTML5是基于HTML5画布的跨浏览器JavaScript图表库,本教程将会介绍如何使用TeeChart for Javascript库创建图表和图形。
# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>
相关链接:
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;
将数据添加到系列
使用对象将数据添加到图表中。
多个系列可以存在于同一图表中。 每个系列可以是不同的类型(线,面,条,饼等),因此您可以混合使用多种样式。
直接数据:向图表添加数据的最简单方法是在图表构建时传递一组值。
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加上数组中的系列索引(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);...
来自文本文件URL:
Chart1.addSeries(new Tee.Bar(“//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"));
关注慧聚IT微信公众号 ☟☟☟,了解产品的最新动态及最新资讯。
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn
文章转载自:本文探讨 SQL Server 中 NULL 和空值之间的区别,并讨论如何有效地处理它们。
Unity 是一款功能极其丰富的游戏引擎,允许开发人员将各种媒体集成到他们的项目中。但是,它缺少最令人兴奋的功能之一 - 将 Web 内容(例如 HTML、CSS 和 JavaScript)直接渲染到 3D 场景中的纹理上的能力。在本文中,我们将介绍如何使用 DotNetBrowser 在 Unity3D 中将 Web 内容渲染为纹理。
DevExpress v24.2帮助文档正式发布上线了,请按版本按需下载~
本教程将向您展示如何用MyEclipse构建一个Web项目,欢迎下载最新版IDE体验!
服务电话
重庆/ 023-68661681
华东/ 13452821722
华南/ 18100878085
华北/ 17347785263
客户支持
技术支持咨询服务
服务热线:400-700-1020
邮箱:sales@pclwef.cn
关注我们
地址 : 重庆市九龙坡区火炬大道69号6幢