10个JavaScript库绘制自己的图表 jopen 2015-04-06 18:18:38 • 发布 摘要:10个JavaScript库绘制自己的图表 JointJS JointJS is a JavaScript diagramming library. It can be used to create either static diagrams or fully interactive diagramming tools and application builders. Here a

图形编辑工具提供对要素图形进行增.删.改的功能,具体包括以下几种工具类型: 浏览工具 选择工具 创建要素工具 删除命令 分割工具 合并命令 节点编辑工具 修边工具 撤销命令 重做命令 工具的实现基本上是基于ol.interation来实现的,只不过做了组合.结果处理等实现.分割工具效果图如下: 实现思路: 1.通过工具管理器进行工具间切换等统一调度 2.每个工具通过SetActive方法实现该工具的启动.卸载逻辑 3.每个工具维护自己的光标状态.辅助工具栏和交互处理逻辑 线分割示例代码: 'us

众多周知,图形和图表要比文本更具表现力和说服力.图表是数据图形化的表示,通过形象的图表来展示数据,比如条形图,折线图,饼图等等.可视化图表可以帮助开发者更容易理解复杂的数据,提高生产的效率和 Web 应用和项目的可靠性. 在这篇文章中,我们收集了12款值得网站开发者收藏的 JavaScript 图形图表库,可以帮助你实现各种功能的图表. 您可能感兴趣的相关文章 Web 前端开发人员和设计师必读文章集锦 十个拥有丰富 UI 组件的 JavaScript 框架 十款精心挑选的在线 CSS3 代码生成

Telerik提供了RadDiagram控件,用于图形元素的旋转,拖拽和缩放.更重要的是,它还拓展了许多绑定的命令(复制,剪切,粘贴,回退等等). 我们可以用来组织自己的图形编辑工具. Step1.定义图形元素容器(Shape)的基类,继承RadDiagramShape,并重写Serialize和Deserialize方法,来定制将来对象的保存或复制. /// <summary> /// 图形Shape控件 /// </summary> public class FigureSha

/* * 实习课上讲进阶功能所用文档,因为赶时间从网上抄抄改改,凑合能用,记录一下以备个人后用. * * ------------------------------------------------------------------- * * 使用前提:已搭建好AE的GIS基本框架,包括TOC.mapcontrol.toolbar拖控件,mxd.shp文件载入显示,查看图层属性表等 * * --------------------------------------------------

本文是WPF学习11:基于MVVM Light 制作图形编辑工具(2)的后续 这一次的目标是完成 两个任务. 本节完成后的效果: 本文分为三个部分: 1.对之前代码不合理的地方重新设计. 2.图形可选择外框颜色,填充颜色的实现简介. 3.拖动图形的实现简介. 修改之前的代码 我们在写代码的时候,经常回头看之前的代码,如果觉得之前的代码有问题,这时候条件如果允许,就改了吧. 做出的改动: 1.修改Image为Canvas. 目的:使图形的缩放和移动这部分的代码实现大大简化. 去除了配置按钮.原因是

本文是WPF学习10:基于MVVM Light 制作图形编辑工具(1)的后续 这一次的目标是完成 两个任务. 画布 效果: 画布上,选择的方案是:直接以Image作为画布,使用RenderTargetBitmap绑定为Image的图片源,这样可以为后续的导出图片功能提供很大的便利. 对拖动栏XAML进行如下修改: <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="

在“JavaScript图形实例:四瓣花型图案”和“JavaScript图形实例:蝴蝶结图案”中,我们绘制图形时,主要采用的方法是先根据给定的曲线参数方程计算出两点坐标,然后将两点用线段连接起来,线段的集合会构成一幅幅精美的图形.下面我们继续给出一些用线段构造图形的实例,供大家欣赏和借鉴. 1．莫尔花纹图案 设定曲线的坐标方程为: b=r*(1+ sin(2.5*θ)/2); x1=b*cos(θ); x2=b*cos(θ+π/4); y1=b* sin(θ); y2=b* sin(θ+π/4)

在“JavaScript图形实例:迭代函数系统生成图形”一文中,我们介绍了采用迭代函数系统(Iterated Function System,IFS)创建分形图案的一些实例.在该文中,仿射变换函数W的一般形式为 X1=a*X0 + b*Y0 + e Y1=c*X0 + d*Y0 + f 给定不同的IFS码,可以生成不同的图形. 实际上,仿射变换函数的形式还可以是 X1= a * X0*cos(c/180) -  b * Y0*sin(d/180) + e Y1= a * X0*sin(c/180

在“JavaScript图形实例:SierPinski三角形”中,我们介绍了SierPinski三角形的基本绘制方法,在“JavaScript图形实例:迭代函数系统生成图形”一文中,介绍了采用IFS方法生成SierPinski三角形的方法.下面再介绍两种SierPinski三角形的构造方法,以扩展知识面. 1．随机点法 采用随机点的方法可以得到SierPinski三角形.具体过程为: (1)任意取平面上三点A.B.C,组成一个三角形,并任意取三角形ABC内的一点P: (2)求出P和A.B.C三个

项目中经常会用到表格编辑控件,网上也有不少,但是确实没有完全符合我要求的, 自己写一个吧! 1.该控件支持 数据显示列,文本编辑列,选择列,下拉列,索引列,删除列 六种列类型 2.支持全键盘操作,自定义键位 包括:列焦点切换,行焦点切换,新建行,数据保存(默认 上,下,左,右 键操作) 3.丰富的事件,绝大多数的客户端操作都能触发无刷新后台事件 4.支持统计运算,可自定义运算插件 5.兼容 Ie,chorme,firefox等绝大多数主流浏览器 下载地址:http://files.cnblogs

在页面中添加canvas元素会在页面上生成一个矩形的位图画布,可以使用JavaScript在画布上实时绘制图形图像.在绘制图形时,需要先调用画布的getContext函数获取与该画布相关的用于绘制图形(如2D图形.3D图形)的对象,然后使用这个对象调用不同的图形函数来绘制相应的图形.下面分别介绍2D图形中几种常见图形的绘制方法. (1)直线 在绘制直线时,先使用moveTo(x,y)函数设置直线的起始点,参数x和y表示起始点的横坐标和纵坐标,以像素为单位,接着通过lineTo(x, y) 函数设

描述 本例展示了如何增加多个图形图层到地图.一个图形图层显示国家,另一个显示城市.在一个地图中有多个图形图层的能力是在ArcGIS JavaScript API v1.4增加的. 从蓝色的城市点分隔灰色的区县多边形使图形易于管理.例如,如果仅仅想要删除城市,仅需删除有这个城市点的图形图层.如果城市和区县在同一个图形图层里,就不得不写一些额外的代码来探测城市图层并且删除它们. 注意如果单击一个重叠的图形区域(本例中是一个城市),仅仅上层的图形响应单击事件. <!DOCTYPE HTML PUBLI

描述 本例展示了如何使用图形显示查询结果,如何使用draw toolbar在地图上选择图形和如何修改图形符号为“高亮”. 在地图上画一个矩形区域,加亮矩形范围内的城市.这个应用统计高亮的城市个数并列出城市名称.能够画另外一个矩形来改变高亮的城市集合. 初始的在地图上见到的城市集和是应用加载时生成的查询结果.查询找到ESRI_StatesCitiesRivers_USA地图服务的Cities layer的Washington州的所有城市.城市被加到地图的GraphicsLayer. draw to

我们知道在直角坐标系中,圆的方程可描述为: X=R*COS(α) Y=R*SIN(α) 用循环依次取α值为0~2π,计算出X和Y,在canvas画布中将坐标点(X,Y)用线连起来,可绘制出一个圆.编写HTML文件内容如下: <!DOCTYPE html> <head> <title>圆的绘制</title> <script type="text/javascript"> function draw(id) { var canv

设有坐标计算公式如下: X=L*(1+SIN(4α))*COS(α) Y=L*(1+SIN(4α))*SIN(α) 用循环依次取α值为0~2π,计算出X和Y,在canvas画布中对坐标位置(X,Y)描点,可绘制出一个曲线图形.编写HTML文件内容如下: <!DOCTYPE html> <head> <title>曲线图形</title> <script type="text/javascript"> function draw

一.背景 喔,五天的实训终于结束了,学校安排的这次实训课名称叫高级程序设计实训,但在我看来,主要是学习了Visual C++ .NET所提供的MFC(Microsoft Foundation Class)库所提供的类及其功能函数的使用.写这一篇博客的目的是针对实训中出现的问题做一些说明,方便以后查看,并且对这次实训做一些总结.这一次的实训对我来说其实挺难受的,真正用来学习使用VS和MFC的时间只有三天,加上下个周是考试周,还有几门课没有复习完,这几天基本上是连轴转,中午也泡在实验室里,唉啊还是自

1.1  扇形变换 将如图1所示的上边长方形的图形变换为下边的扇形图形的变换称为扇形变换. 设长方形图形中任一点P1(X1,Y1)变换为扇形图形上的点P2(X2,Y2),长方形的长为X,扇形圆心坐标为(X0,Y0),扇形半径为L,扇形与X轴的最小夹角为B,扇形弧对应夹角为C,则点P2的坐标计算公式为: X2=(L+Y1)*COS(θ)+X0 Y2=-(L+Y1)*SIN(θ)+Y0 其中: θ=C*(X-X1)/X1+B 图1  扇形变换 生成一个六瓣花型图案的基本数据,将长方形中的8个六瓣花型

旋转变换:图形上的各点绕一固定点沿圆周路径作转动称为旋转变换.可用旋转角表示旋转量的大小. 旋转变换通常约定以逆时针方向为正方向.最简单的旋转变换是以坐标原点(0,0)为旋转中心,这时,平面上一点P(x,y) 旋转了θ之后,变成点P’(x,y) ,如图1所示. 图1 点P逆时针旋转 由三角关系可得: 平面上一点P(x,y)若按顺时针方向旋转了θ之后,变成点P’(x,y) ,如图2所示. 图2 点P顺时针旋转 由三角关系可得: 1．三角形旋转 先绘制一个三角形,然后将该三角形依次顺时针旋转45°,

数学中有各式各样富含诗意的曲线,螺旋线就是其中比较特别的一类.螺旋线这个名词来源于希腊文,它的原意是“旋卷”或“缠卷”.例如,平面螺旋线便是以一个固定点开始向外逐圈旋绕而形成的曲线. 阿基米德螺线和黄金螺旋线就是典型的螺旋线.下面我们探讨一种典型的螺旋线:圆内螺线. 1．圆内螺线的形成方式 在固定的大圆中内切一个运动的小圆,在小圆滚动的过程中,其上一个定点P所形成的轨迹,即为圆内螺线.点P会随着两圆半径比值的不同而出现不同轨迹.例如,当小圆半径等于大圆的四分之一时,形成的轨迹则是星形线,如图1所

正弦曲线的坐标方程为: Y=A*SIN(X)    (A为振幅) 1．正弦曲线 在弧度为0~4π的正弦曲线上取360个点,将这些点用线连接起来,可以绘制出正弦曲线.编写如下的HTML代码. <!DOCTYPE html> <head> <title>正弦曲线的绘制</title> <script type="text/javascript"> function draw(id) { var canvas=document.ge