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