`
erntoo
  • 浏览: 30044 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论
  • erntoo: 修改somaxconn该内核参数默认值一般是128,对于负载很 ...
    rpm

Raphael 曲线图使用示例

    博客分类:
  • js
阅读更多
var linesComment=['a','b','c'];///数据线条说明

var dataY=[
           [0, 0, 406, 254, 171, 47, 24, 58, 104, 255, 396, 264],
			[0,0,300,400,300,282,70,50,90,100,110,120],
			[0,0,100,200,300,382,170,150,190,200,210,220]
		];//Y 轴坐标值
var dataX=['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

var dataXS=[0,1,2,3,4,5,6,7,8,9,10,11]; //要显示的第n个 X轴 对应的Y轴值

var options = {
	axis: "0 0 1 1", // 坐标 上 右 下 左
	axisxstep: 11, // X 轴线坐标数  不算坐标原点
	axisxlables: dataX, //X轴坐标值
	axisystep: 4, //Y 轴坐标数   不算坐标原点
	shade:false, // true, false
	smooth:false, //曲线
	nostroke:false,
	width:1,//线条宽度
	dash:false,
	symbol:"circle"
};

$(function () {
	// Make the raphael object
	var r = Raphael("chartHolder"); 
	var lines = r.linechart(
		30, // 图片左边距
		20, // 图片上边距
		600, //图片宽度
		200, // 图片高度
		dataXS, // 要显示的Y 轴
		dataY, // Y 轴
		options // opts object
	).hoverColumn(function () {
        this.tags = r.set();

		var box_x = this.x, box_y = 20,
			box_w = 60, box_h = 13*linesComment.length;
		if (box_x + box_w > r.width) box_x -= box_w;
		//var box = r.rect(box_x,box_y,box_w,box_h).attr({stroke: "#f00", "stroke-width": 1, r:3}); //显示提示数据框
		//this.tags.push(box);//销毁提示数据框
		
        for (var i = 0; i < this.y.length; i++) {
			var t = r.blob(this.x, this.y[i], linesComment[i]+": "+this.values[i]).insertBefore(this).attr([{ fill: "#fff", stroke: "#f0f"}, { fill: this.symbols[i].attr("fill") }]);
        	//var t = r.text(box_x+30, box_y+10 + i*10,linesComment[i]+": "+this.values[i]).attr({fill: this.symbols[i].attr("fill")})
        	this.tags.push(t);
        }
        
    }, function () {
        this.tags && this.tags.remove();
    });

    lines.symbols.attr({ r: 2 });//节点半径
});

 

分享到:
评论

相关推荐

    raphaelJS制作图表、饼图、柱状图、曲线图

    在这个主题中,我们将深入探讨如何使用Raphaël.js 制作图表,包括饼图、柱状图和曲线图。 1. **饼图**:饼图是一种展示数据比例关系的有效方式。在Raphaël中,创建饼图通常涉及以下几个步骤: - 初始化画布:...

    raphael画流程图

    对于流程图中的连接线,Raphaël提供`path`方法,可以配合贝塞尔曲线来绘制平滑的线条: ```javascript var path = paper.path("M" + 起点X + " " + 起点Y + " L" + 终点X + " " + 终点Y); ``` 为了实现可自定义...

    raphael特效示例

    综上所述,"raphael特效示例"是展示如何利用Raphaël库在JavaScript中创建引人入胜的互动图形和动画的实例集合。通过学习和实践这些示例,开发者可以提升在Web前端开发中的创新能力和用户体验设计水平。

    raphael web绘图工具

    在项目中,通常会使用`raphael.js`作为基础库,而`g.raphael.js`是Raphaël的扩展包,提供了更多的图形类型和图表功能,例如饼图、柱状图、线图等,适合用于数据可视化。 使用Raphaël时,开发者需要先引入这两个...

    SVG画图插件raphaelJS

    1. **图形创建**:你可以使用RaphaelJS创建各种基本形状,如圆形、椭圆、矩形、多边形、线和曲线等。此外,还支持自定义路径,以创建更复杂的图形。 2. **样式控制**:你可以设置图形的颜色、填充、描边、线条宽度...

    web流程图动态绘制-使用raphael

    在给定的博客文章中,作者详细介绍了如何使用Raphael实现流程图的步骤。文章可能包含了以下内容: 1. **初始化Raphael画布**:在HTML中创建一个div元素,然后在JavaScript中使用`Raphael('div_id', width, height)`...

    myflow流程图设计采用raphael的js文件

    在本文中,我们将深入探讨如何使用Raphael.js库来创建myflow流程图设计。Raphael.js是一个强大的JavaScript库,专为Web开发人员提供矢量图形支持。它允许开发者在SVG(可缩放矢量图形)和VML(矢量标记语言)之间...

    raphael js所有文档以及网站内容,书籍

    6. **绘图路径**:Raphaël允许通过Path命令创建复杂的矢量路径,使用SVG的路径数据格式,如M(移动到)、L(直线到)、C(三次贝塞尔曲线到)等。 7. **动画效果**:Raphaël的动画功能强大,不仅支持基本的平移、...

    犀利的纯JS图形框架

    2. **丰富的图形元素**:Raphael.js提供了各种基本图形元素,如圆形、矩形、线、多边形、文本等,以及更复杂的路径和贝塞尔曲线,可以用来构建复杂的图形和设计。 3. **交互性**:通过JavaScript,开发者可以轻松地...

    javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图

    gRaphael是一个基于JavaScript的矢量图形库,专为网页开发者设计,让其能够轻而易举地在网页上绘制出各种图形和图表,包括条形图、饼图、点图和曲线图。使用gRaphael,开发者仅需编写少量代码,便能够实现专业级别的...

    优秀的js画图库.rar

    5. **社区支持**:由于Raphael.js的广泛使用,网上有大量的教程、示例和插件,方便开发者学习和解决问题。 在实际Web开发中,你可以使用Raphael.js来创建数据可视化图表、游戏、交互式UI元素,甚至复杂的动画。只需...

    svg-painter:svg 画布基础作为 raphael.js

    让我们一起了解SVG画布的基础知识,Raphael.js的核心功能,以及如何使用svg-painter来增强SVG图形的创作能力。 SVG(Scalable Vector Graphics)是一种XML格式,用于描述二维图形。SVG图像可以无限缩放而不会失去...

    p5-vs-R:使用 javascript 对 HTML5 画布进行处理与拉斐尔实验

    Raphael 示例使用与 p5 示例的构建方式类似的结构模式构建,以便更容易地理解两个文件。 #依赖于以下库: 处理 - p5.js - 拉斐尔 - raphael.js - #本地运行 没有网络服务器 仅支持 Firefox 在浏览器中打开 p5....

    js实现涂抹功能

    在SVG中,我们可以使用`&lt;path&gt;`元素来表示这一路径,通过连续添加点并平滑连接它们来形成曲线。在JavaScript中,可以使用`addEventListener`来监听鼠标或触摸事件,并更新`&lt;path&gt;`元素的`d`属性。 接着,为了将涂抹...

Global site tag (gtag.js) - Google Analytics