Flort2柱图

图1:

(function basic_bars(container, horizontal) {

  var
    horizontal = (horizontal ? true : false), // Show horizontal bars
    d1 = [[0.875,3],[1.575,3],[2.275,3]],           // First data series
    d2 = [[1.125,5],[1.825,7],[2.525,7]],
    point,                                    // Data point variable declaration
    i;             
  // Draw the graph
  Flotr.draw(
    container,
    [d1,d2],
    {
      title : '主标题',
      subtitle : '**副标题**',
      colors : [ '#B4AFB3','#A73946', '#61565A','FEA2AD'],
      bars : {
        show : true,
        horizontal : horizontal,
        shadowSize : 3,
        barWidth : 0.25
      },
      mouse : {
        track : true,
        relative : true
      },
      yaxis : {
        min : 0,
        autoscaleMargin : 1,
        title : 'Y轴标题'
      },
      xaxis : {
        ticks: [[1, '分类1'],[1.7,'分类2'],[2.4,'分类3']],
        labelsAngle : 30,
        titleAngle : 2,
        tickDecimals: 0,
        title : 'X轴标题'
      }
    }
  );

})(document.getElementById("editor-render-0"));

图2:

(function basic_bars(container, horizontal) {


  var
    horizontal = (horizontal ? true : false), // Show horizontal bars
    d1 = [[1,1],[2,4],[3,6],[4,3],[5,4],[6,2],[7,3],[8,4],[9,2],[10,3],[11,4],[12,2]], 
    point,                                    // Data point variable declaration
    i;             
  // Draw the graph
  Flotr.draw(
    container,
    [d1],
    {
      title : '2013年A产品销售情况',
      bars : {
        show : true,
        horizontal : horizontal,
        shadowSize : 3,
        barWidth : 0.7
      },
      mouse : {
        track : true,
        relative : true
      },
      yaxis : {
        ticks : [[0,'0'],[1,'1k'],[2,'2k'],[3,'3k'],[4,'4k'],[5,'5k'],[6,'6k']],
        title : '销售量',
        min : 0,
        showLabels : true,
        showMinorLabels : true
      },
      xaxis : {
        labelsAngle : 30,
        titleAngle : 2,
        ticks : [[1,"一月"],[2,"二月"],[3,"三月"],[4,"四月"],[5,"五月"],[6,"六月"],[7,"七月"],[8,"八月"],[9,"九月"],[10,"十月"],[11,"十一月"],[12,"十二月"]],
      }
    }
  );
})(document.getElementById("editor-render-0"));

图3:

(function basic_bars(container, horizontal) {


  var
    horizontal = (horizontal ? true : false), // Show horizontal bars
    d1 = [[-0.25,15],[0.75,50],[1.75,30],[2.75,25],[3.75,10],[4.75,25],[5.75,30]],           // First data series
    d2 = [[0.25,10],[1.25,32],[2.25,20],[3.25,30],[4.25,22],[5.25,15],[6.25,5]],
    point,                                    // Data point variable declaration
    i;             
  // Draw the graph
  Flotr.draw(
    container,[
    { data : d1, label : '茄子' },
    { data : d2, label : '土豆' }],
    {
      title : '上周出货量情况',
      subtitle : '',
      bars : {
        show : true,
        horizontal : horizontal,
        shadowSize : 3,
        barWidth : 0.5
      },
      mouse : {
        track : false
      },
      yaxis : {
        min : 0,
        autoscaleMargin : 1,
        title : '出货量'
      },
      xaxis : {
        labelsAngle : 30,
        margin: true,
        ticks : [[0,'星期日'],[1,'星期一'],[2,'星期二'],[3,'星期三'],[4,'星期四'],[5,'星期五'],[6,'星期六']]
      },
      grid: {
        verticalLines: false,
        color: '#666666',
        outlineWidth: 2,
      }
    }
  );
})(document.getElementById("editor-render-0"));