如何修改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
分享到:
相关推荐
几乎兼容所有浏览器包括ie, firefox,chrome,opera, Safari 可动态拖动图形(贝磁曲线、动态拾色器、图表、地图导航、流程图等)。
gRaphael 是一个致力于帮助开发人员在网页中绘制各种精美图表的 Javascript 库,基于强大的 Raphael 矢量图形库。你只需要编写几行简单的代码就能创建出精美的条形图、饼图、点图和曲线图。 gRaphael 使用 SVG W3C...
javascript raphael 画饼图,很方便 很简单 很容易懂!不用更改代码,直接写相应的html格式就好了!全自动生成饼图
使用raphael类库 进行绘制,可直接拿来运行
raphael
javascript 基于Raphael的工作流可视化编辑 拖动对应状态图形到窗口 根据锚点链接状态-动作-状态 实现可视化编辑 返回json 序列
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.JSON Raphael.Export Raphael.FreeTransform raphael.serialize
raphael特效示例,使用javaScript也能做出强大的效果
Raphael 的 pie 图表 http://raphaeljs.com/growing-pie.html
要在 Rails 应用程序中使用它,请将它包含在您的 gemfile 中,并需要 raphael/raphael.js 以及您在 css 文件中需要的任何 g.raphael 图。 特约graphael护栏 查看最新的 master 以确保该功能尚未实现或错误尚未修复...
使用 RaphaelJS 的简单条形图库 创建简单的条形图 比较视图 横向或纵向模式 悬停值的工具提示 多色支持 横向/纵向模式 配置简单 支持 IE 6+ 安装 git clone https://github.com/rohitmisra/barChart-raphaelJS.git ...
<script type="text/javascript"> // 在坐标(10,50)创建 640 × 480 的画布 var r = Raphael(10, 50, 640, 480); // 创建中心坐标为(320, 240)的饼图,半径为100,数据为[55, 20, 13, 32, 5, 1, 2, 10]的...
raphaeljs_starter.pdf
raphael-min.js
Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you ...
raphael.js实例
Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库。它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以通过 JavaScript 操作 DOM 来轻松创建出各种复杂的柱状图、饼图、曲线图等各种图表,还可以...
前端项目-raphael,JavaScript Vector Library
raphael.draggable.js,是给raphael.js扩展的拖拽功能。画布整体拖动,还原,以及单独元素拖动。raphael.extension.js