Web Chart
关注
分享
扫一扫
文章平均质量分 86
VML , SVG, HTML5 Canvas技术在web 端绘制矢量图形
oscar999
毕业于中国科学技术大学，数据库四级、通过系统设计师、系统分析师、信息系统项目管理师资格认证。国际项目管理（IPMP）C级认证。超过20年软件项目开发和管理经验，精通Java Web相关技术（包括Spring系列、Ext JS等），对PHP、Python、C#、Vue等有涉猎。
展开
-
web 端 gantt组件选型
gantt - 甘特图甘特图（Gantt chart）又称为横道图、条状图(Bar chart)。其通过条状图来显示项目，进度，和其他时间相关的系统进展的内在关系随着时间进展的情况。以提出者亨利·L·甘特（Henrry L. Ganntt）先生的名字命名。以图示的方式通过活动列表和时间刻度形象地表示出任何特定项目的活动顺序与持续时间。基本是一条线条图，横轴表示时间，纵轴表示活动（项目），线条表示在原创 2016-12-28 16:20:02 · 6527 阅读 · 0 评论 -
[Web Chart系列之五] 6. 实战draw2d之ConnectionRouter
ConnectionRouter 的作用是定义连线的展示样式.是直线连接还是曲线连接(好像也是基于Bezier曲线)位于包： draw2d.layout.connection 下。常见的有：1. DirectRouter -- 用直线连接两个节点2. ManhattanConnectionRouter -- 使用 曼哈顿距离算法， 效果看上去是直角折线连接的。3. SplineConnectionRouter 从ManhattanConnectionRouter继承过来， 不过是曲原创 2013-08-30 16:19:47 · 3070 阅读 · 0 评论 -
Web图形开发方案选型，SVG/VML/Flash/Applet优劣比较
Web图形开发方案选型，SVG/VML/Flash/Applet优劣比较 在Web 项目开发过程中,我们常常会使用到各类图形,如流程图，饼图，甘特图，散列图，趋势图等等。目前有很多种方法在网页上绘制图形， 但是要找到完美的web图形解决方案是比较难的，只能是根据自己的需要，选择自己最合适的画图方案。Web 图表一般有以下几种做法：1.使用客户端控件技术2.使用服务器端生成图片原创 2013-06-26 08:49:42 · 5075 阅读 · 1 评论 -
[Web Chart系列之五] 5. 实战draw2d之figure tooltip 实现
写在前面申明一下，关于系列五的前4篇的介绍都是基于 draw2d 的版本version 2.3.0 上的开发。截至目前(2013/05), draw2d的最新版本已经是version 2.6.1 了。对于tooltip 的功能，在 version 2.3.0是没有提供，但是， 在version 2.6.1已经提供了实现tooltip的方式。实现tooltip i原创 2013-05-05 11:20:10 · 2617 阅读 · 0 评论 -
[Web Chart系列之七] 物理动画效果(如撕扯效果)
物理动画这里物理动画说的是，图形的动画效果和实际生活中的物理效果类似，比如说重力影响的效果。其实动画的实现就是把一个动作拆分成间隔连续的去完成， 视觉上就感觉是在动的了。 比如把一个图从左边移到右边， 设总距离100的话， 每隔 1/40秒 移到 1 的话，效果就会有了。这个时间间隔和距离间隔设置多少为最佳，美学上是有一些定义的，这里就不探讨了。一个拽动和撕扯窗原创 2013-04-24 20:11:36 · 2210 阅读 · 0 评论 -
[Web Chart系列之六] canvas Chart 导出图文件
介绍使用SVG绘制的图形可以导出为svg 格式的文件，使用浏览器等可以查看。是否可以导出为png, gif 格式的文件呢？ 当然是可以。只是在 web 直接创建和操作文件是不建议的，而且存在各浏览器兼容的问题， 比如IE使用ActiveX来创建新文件。正确的做法，是在web server 端传送文件到web 端， 不过对于web chart 来说， 好像又多绕了一圈。这里的原创 2013-03-20 15:28:55 · 3423 阅读 · 0 评论 -
[Web Chart系列之五] 4. 实战draw2d(Raphael)之取消Chrome中Label Text 全部选中
情况描述这里使用的是Rectangle , 里面加入一个Label 或多个Label 的组合图形。在Chrome里拖拽图形的时候，偶尔会把所有Rectangle包含的Label 全部以深蓝色底色。需要在非Canvas的区域点击一下，深底色才消除。以上的状况出现在IE和Chrome都会有，但几率倒不是很大。在Firefox 中没有这个问题。问题考虑与重现既然不原创 2013-03-19 17:50:40 · 2556 阅读 · 0 评论 -
[Web Chart系列之五] 3. 实战draw2d 之图形填充色(纯色 or 渐变)
颜色渐变draw2d 目前没有提供直接对Figure 设置渐变效果的API.但是raphael 有提供， 这样的话基本上在draw2d实现渐变成为可能。颜色渐变功能来源raphael 提供的图形背景色渐变的设置：看例子<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.原创 2013-03-18 18:06:21 · 4835 阅读 · 2 评论 -
[Web Chart系列之五] 2. 实战draw2d 之Label 放大，缩小的问题(raphael的text类似问题)
问题描述在draw2d中使用Canvas 的setZoom function来扩大，缩小画布进而放大，缩小画布上的图形大小。(Zoom in/Zoom Out功能)。图形类型Circle, Rectangle的放大，缩小都还正常， 但是 在Chrome浏览器下Label 的缩小功能却存在着label 的文本缩小时反而会变大的状况。具体的测试方式如下：1. 没有给label原创 2013-03-13 20:18:40 · 5959 阅读 · 2 评论 -
[Web Chart系列之五] 1. 实战draw2d 之总体介绍
draw2d 是什么？首先需要明确的是这里指的draw2d是个什么东东? 用draw2d这个关键字，询问一下谷哥和度娘基本上会找到两个东西一个是集成在eclipse(也可以单独使用) 里面使用SWT开发的一套绘图的工具。也就是java 开发一个图形绘制的应用程序,可以用来绘制UML等。另一个是Draw2D touch，使用JavaScript 和HTML Canvas 开发原创 2013-03-13 10:08:52 · 7623 阅读 · 0 评论 -
[Web Chart系列之一(续)]Web端图形绘制SVG,VML, HTML5 Canvas 简单实例
前言本篇是继 [Web Chart系列之一]Web端图形绘制SVG,VML, HTML5 Canvas 技术比较的补充和实例说明各种技术的使用方式。VML 的用法和实例引入命名空间之后，就可以直接使用标签的方式绘制图形。如下例：绘制一条从 坐标(20,20) 到 坐标(200,200) 的直线。VML Example说明： xmlns:v原创 2013-03-07 11:20:12 · 2957 阅读 · 0 评论 -
[Web Chart系列之四] 图形布局-Layout 之js设计实现
前言定位browser 的 chart, VML,SVG, HTML5 Canvas使用的方式各不一样。如果使用现有的js library (各种实现js 图表的library汇总与比较) ， 调用的API方式也肯定不同。举个例子: draw2d 使用addFigure 和 setPosition 都可以设置图的位置。混在特定技术或是特定library 里去layout ，原创 2013-02-05 17:15:49 · 3267 阅读 · 0 评论 -
[Web Chart系列之三] 图形布局-Layout
前言从上一篇：[Web Chart系列之二] 各种实现js 图表的library汇总与比较的介绍， 目前提供提供绘制矢量图的library 还是很多的。 如果只是需要绘制一些柱状图， 饼图， 散点图, 时序图这样一些简单图的话， 从所列出的library 中是可以找到很多选择的。但是如果需要绘制的是结构图， 关联图这样一些数据量大，逻辑稍显复杂的图，页面布局就是需要面临的一个大原创 2013-01-25 17:57:22 · 4064 阅读 · 1 评论 -
[Web Chart系列之二] 各种实现js 图表的library汇总与比较
前言使用js 在浏览器展现图表， 参考系列一Web端图形绘制SVG,VML, HTML5 Canvas 技术比较汇总目前实现web 图表的js library 数量是很多， 此处汇总：Name Brief IntroduceBrowser SupportSite URLComments$fx() 1.原创 2013-01-24 09:53:18 · 12955 阅读 · 0 评论 -
[Web Chart系列之一]Web端图形绘制SVG,VML, HTML5 Canvas 技术比较
先介绍一下矢量图的概念：矢量图使用直线和曲线来描述图形，这些图形的元素是一些点、线、矩形、多边形、圆和弧线等等，它们都是通过数学公式计算获得的。例如一幅花的矢量图形实际上是由线段形成外框轮廓，由外框的颜色以及外框所封闭的颜色决定花显示出的颜色。SVG,VML, HTML5 Canvas 这三个技术绘制的都是矢量图。 只是由不同的厂商开发出来的。 要达成的效果基本是一样的。1. V原创 2013-01-15 23:10:09 · 7049 阅读 · 0 评论