数据可视化----Flotr2和Raphaël 绘制气泡图

      Flotor2是一个用于绘制 HTML5 图形和图表的开源 JS 库，是Flotor的的一个分支

mobile support framework independent extensible plugin framework custom chart types FF, Chrome, IE6+, Android, iOS

lines
bars
candles
pies
bubbles

      从官网的介绍中可以看到Flotr2支持Chrome, IE6+、移动设备Android和iOS。支持报表形式有成线形图、条形图、烛形图、饼形图。

    在网址http://www.humblesoftware.com/flotr2/index   中有关于它各报表形状的介绍和实现代码。

     Flotr2 使用方法

   1.引入类

        2、图表平移

             

          左键点击后鼠标往左移动，图表变为

               

           

     需要把上文的代码从绘图       graph = drawGraph(); 

     之后变为

function initializeDrag (e) {
    start = graph.getEventPosition(e);
    Flotr.EventAdapter.observe(document, 'mousemove', move);
    Flotr.EventAdapter.observe(document, 'mouseup', stopDrag);
  }

  function move (e) {
    var
      end     = graph.getEventPosition(e),
      xaxis   = graph.axes.x,
      offset  = start.x - end.x;

    graph = drawGraph({
      xaxis : {
        min : xaxis.min + offset,
        max : xaxis.max + offset
      }
    });
    // @todo: refector initEvents in order not to remove other observed events
    Flotr.EventAdapter.observe(graph.overlay, 'mousedown', initializeDrag);
  }

  function stopDrag () {
    Flotr.EventAdapter.stopObserving(document, 'mousemove', move);
  }

  Flotr.EventAdapter.observe(graph.overlay, 'mousedown', initializeDrag);

气泡图绘制

        三维气泡图 气泡图与 XY 散点图类似，但是它们对成组的三个数值进行比较，以下是实现代码，只需要把数据插入 d1,d2,d3中就可以实现气泡图展示。