`
小熊2号
  • 浏览: 15095 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Javascript统计图库Raphael/gRaphael的一些使用技巧

阅读更多
如何修改Raphael的Line Chart的X轴下标?

  var r = Raphael("chartDiv");
  
  var lines = r.linechart(...);
  
  var xValues = lines.axis[0].text.items;
  for(x in xValues) {
    xValues[x].attr({'text': 'newValue', 'fill': '#666666', 'font': '8px Verdana, sans-serif'});
  };


     Raphael line chart局限性:X轴是自动计算的,不能自动规整为整数。
     版本:g.raphael 0.5


如何在Raphael的g.line中显示X序列不规整(即不对应到步长的倍数)的数据?
    
     设定第一个X序列的值为base,把所有记录的x值,转换为相对base偏移,得到横坐标系列;
     Y坐标值序列不变;
     记下X序列base对应的值;
     画图以后,把图上X序列(已被Raphael规范为固定步长的倍数)的值,加上base值,作为图上X序列应该显示的值。

     这个方案,虽然坐标不规整,但是好歹是正确的。
     版本:g.raphael 0.5


如何改进Raphael的g.line以支持shadeColors属性(阴影颜色)?
     diff g.raphael-0.5/g.line.js myJSLib/g.line.tjs
     71a72
     > shadeColors = opts.shadeColors || colors,
     85c86
     < shades.push(paper.path().attr({ stroke: "none", fill: colors[i], opacity: opts.nostroke ? 1 : .3 }));
     ---
     > shades.push(paper.path().attr({ stroke: "none", fill: shadeColors[i], opacity: opts.nostroke ? 1 : .3 }));
    
     有了这个属性,可以将部分曲线的阴影颜色设置为'transparent',从而可以同时显示无阴影和有阴影曲线。
     版本:g.raphael 0.5

如何修改Raphael的g.bar的X轴下标?
    var bars = r.barchart(..);
   bars.label([['1','2','3','4','5','6','7','8','9','10','11','12']], true);
     bars.labels.attr('fill', '#323232');

   版本:g.raphael 0.5

如何改变Raphael气泡(popup)的颜色?
     Raphael气泡(popup)的颜色是硬编码在g.raphael.js的Raphael.el.popup函数中的,值为#000。
     修改:把popup函数的最后一条语句
     return c.path(i[d]).attr({fill:"#000",stroke:"none"}).insertBefore(this.node?this:this[0])}

     改为:
     return c.path(i[d]).attr({fill:"#323232",opacity:0.9,stroke:"none"}).insertBefore(this.node?this:this[0])}

     版本:g.raphael 0.5
分享到:
评论

相关推荐

    javascript raphael 画饼图

    下面将详细介绍如何使用JavaScript Raphael库来创建饼图。 ### 1. Raphael库的引入 首先,你需要在HTML文件中引入Raphael库的JS文件。通常,你可以通过CDN链接或本地文件路径将其添加到`&lt;head&gt;`标签内: ```html ...

    raphael 统计图 饼图

    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;div id="chart"&gt;&lt;/div&gt; &lt;script src="lineV3.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt; ``` 在`lineV3.js`中,...

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

    gRaphael使用了Raphael矢量图形库作为其核心基础,这一底层支持让它能够兼容多种现代浏览器,包括但不限于Firefox3.0+、Safari3.0+、Chrome5.0+、Opera9.5+和Internet Explorer6.0+。gRaphael图表库支持W3C推荐的...

    js绘图类库 raphael 2.1

    几乎兼容所有浏览器包括ie, firefox,chrome,opera, Safari 可动态拖动图形(贝磁曲线、动态拾色器、图表、地图导航、流程图等)。

    javascript 基于Raphael的工作流可视化编辑

    在本项目中,我们关注的是使用JavaScript基于Raphael库实现的工作流可视化编辑器。Raphael是一个JavaScript库,它允许开发者在网页上创建复杂的矢量图形,支持SVG(Scalable Vector Graphics)和VML(Vector Markup ...

    raphaeljs_starter

    《raphaeljs_starter》这本书系统地介绍了RaphaelJS的核心功能和使用技巧,适合任何希望在网页中加入动态图形和动画效果的开发者阅读。无论是初学者还是有一定经验的开发者,都能从这本书中获得实用的知识和技能,...

    Raphael.JSON Raphael.Export Raphael.FreeTransform raphael.serialize

    Raphael.js是一个强大的JavaScript库,专门用于在Web浏览器中创建矢量图形。它提供了一种在SVG(可缩放矢量图形)和VML(Vector Markup Language)之间无缝切换的方法,使得开发者能够在所有现代浏览器以及IE5.5及更...

    raphael饼图柱状图

    &lt;script type="text/javascript"&gt; // 在坐标(10,50)创建 640 × 480 的画布 var r = Raphael(10, 50, 640, 480); // 创建中心坐标为(320, 240)的饼图,半径为100,数据为[55, 20, 13, 32, 5, 1, 2, 10]的...

    raphael

    raphael

    前端项目-graphael.zip

    Graphael 和 Raphaël 库在数据可视化、仪表板、统计报告、地图应用等场景中非常有用。它们可以帮助开发者快速地创建出各种图表类型,如折线图、柱状图、饼图、散点图等,同时支持自定义样式和交互效果,如鼠标悬停...

    raphael.js 绘制柱状图

    `Raphael.js`是一个JavaScript库,专门用于创建SVG(可缩放矢量图形)和VML(矢量标记语言),使得在网页上绘制复杂的图形变得轻而易举。今天我们将深入探讨如何使用`Raphael.js`来绘制柱状图。 `Raphael.js`库的...

    raphael画流程图

    总之,使用Raphaël.js绘制流程图并实现可自定义缩放的效果,需要理解SVG和VML的基本概念,熟悉Raphaël的API,以及掌握图形布局和用户交互的处理技巧。通过实践和调试,你将能够创建出功能丰富的流程图组件。

    [RaphaelJS] RaphaelJS 编程 (英文版)

    Create beautiful, interactive images on the Web with RaphaelJS, the JavaScript library that lets you draw Scalable Vector Graphics (SVG) right in the browser. With this concise guide, you’ll quickly ...

    raphael.js扩展的拖拽功能,raphael.draggable.js,raphael.extension.js

    在SVG和VML图形库的世界里,Raphael.js是一个非常受欢迎的JavaScript库,它使得在网页上创建和操作矢量图形变得极其简单。Raphael.js不仅支持多种浏览器,包括那些不支持HTML5 canvas的老旧浏览器,而且提供了一套...

    jquery+raphael实现3D饼状图

    &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.x.x/raphael-min.js"&gt;&lt;/script&gt; ``` 2. **创建画布**:接着,我们在HTML中创建一个用于绘制图形的容器,例如一个`&lt;div&gt;`元素,并设置合适的ID以便于...

    Raphael学习笔记

    根据提供的文件信息,可以看出这是一份关于Raphael JavaScript库的学习笔记。Raphael 是一个非常强大的JavaScript库,用于在Web浏览器中绘制矢量图形。它基于SVG(可缩放矢量图形)标准,并提供了丰富的API来简化...

    Raphael走势图

    **Raphael走势图**是基于JavaScript库Raphael的图表绘制工具,尤其适用于在Web应用程序中创建交互式的、矢量图形的动态图表。Raphael库利用SVG(Scalable Vector Graphics)和VML(Vector Markup Language)标准,...

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

    Raphaël.js 是一个强大的JavaScript库,专用于在Web浏览器中创建矢量图形。它基于SVG(可缩放矢量图形)和VML(矢量标记语言),这两种技术允许在网页上绘制清晰且分辨率独立的图形。Raphaël.js 的主要优势在于它...

    SVG画图插件raphaelJS

    RaphaelJS是一款强大的JavaScript库,专门用于在SVG(Scalable Vector Graphics)和VML(Vector Markup Language)格式下创建矢量图形。这个插件允许开发者在网页上绘制出复杂、交互式的图形,而且这些图形在任何...

Global site tag (gtag.js) - Google Analytics