柱状图

页面文档结构

1
2
3
<body>
    <div id="chart" style="width: 600px; height: 300px;"></div>
</body>

绘制图表

1
2
3
4
5
6
7
8
var wins = [[
  [0, 13], [1, 11], [2, 15], [3, 15],
  [4, 18], [5, 21], [6, 28]
]];
var years = [
  [0, '2006'], [1, '2007'], [2, '2008'], [3, '2009'],
  [4, '2010'], [5, '2011'], [6, '2012']
];

  • wins数组每层含义：

    • 第一层：每个独立的数据自身是一个数组，包含x，y两个值；
    • 第二层：若干个独立数据在一起构成数组，称为序列；
    • 第三层：若干个序列构成供Flotr2渲染图使用的完整数据，形式也是数组
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
window.onload = function() {
  Flotr.draw(document.getElementById('chart'), wins, {
    title: 'Manchester City Wins',
    colors: ["#89AFD2"],
    bars: {
      show: true,
      barWidth: 0.5,
      shadowSize: 0,
      fillOpacity: 0.8,
      lineWidth: 0
    },
    yaxis: {
      min: 0,
      tickDecimals: 0                     // 需要展示的小数精度
    },
    xaxis: {
      ticks: years
    },
    grid: {
      horizontalLines: false,
      verticalLines: false
    }
  });
}

结果如图：
Flotr2-bar1

多种柱体颜色

  • 数据组织

    1
    2
    3
    4
    5
    6
    7
    8
    var wins2 = [
      [[0, 28]], [[1, 28]], [[2, 21]],
      [[3, 20]], [[4, 19]]
    ];
    var teams = [
      [0, 'MCI'], [1, 'MUN'], [2, 'ARS'],
      [3, 'TOT'], [4, 'NEW'],
    ];

  • 绘制图表：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    Flotr.draw(document.getElementById('chart'), wins2, {
      title: 'Manchester City Wins',
      colors: ["#89AFD2", "#1D1D1D", "#DF021D", "#0E204B", "#E67840"],
      bars: {
        show: true,
        barWidth: 0.5,
        shadowSize: 0,
        fillOpacity: 0.8,
        lineWidth: 0
      },
      yaxis: {
        min: 0,
        tickDecimals: 0
      },
      xaxis: {
        ticks: years
      },
      grid: {
        horizontalLines: false,
        verticalLines: false
      }
    });

    结果如图：
    Flotr2-bar2

折线图

页面文档结构

1
2
3
<body>
    <div id="chart" style="width: 600px; height: 300px;"></div>
</body>

数据组织

1
2
3
4
5
6
7
8
9
var co2 = [
  [1959, 315.97],
  // Data set continues......
];
var temp = [......];                      // 省略
var zero = [];                            // 基准线
for (var i = 1959; i < 2012; i++) {
  zero.push([i, 0]);
}

绘制图表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
Flotr.draw(document.getElementById('chart'), [
  {
    data: zero,
    label: '20th-Century Baseline Temperature',
    lines: {
      show: true,
      lineWidth: 1
    },
    shadowSize: 0,
    color: 'red'
  },
  {
    data: temp,
    label: 'Yearly Temperature Difference (°C)',
    lines: {
      show: true
    }
  },
  {
    data: co2,
    label: 'CO<sub>2</sub> Concentration (ppm)',
    lines: {
      show: true
    },
    yaxis: 2
  }
], {
  title: 'Global Temperature and CO<sub>2</sub> Concentration (NOAA Data)',
  grid: {
    horizontalLines: false,
    verticalLines: false
  },
  y2axis: {
    min: 300,
    max: 400
  },
  yaxis: {
    min: -0.15,
    max: 0.69,
    tickFormatter: function(val) {                // 设置y轴数据格式
      return val + '°C';
    }
  }
})

结果如图：
Flotr2-line

饼图

页面文档结构

1
2
3
<body>
    <div id="chart" style="width: 600px; height: 300px;"></div>
</body>

数据组织

1
2
3
4
5
6
7
8
9
var data = [ 
  {
    data: [[0, 22.4]],
    label: 'Extreme Poverty'
  },
  {
    data: [[1, 77.6]]
  }
];

绘制图表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Flotr.draw(document.getElementById('chart'), data, {
  title: 'How Much of the World Lives on $1.25/Day?',
  pie: {
    show: true
  },
  yaxis: {
    showLabels: false
  },
  xaxis: {
    showLabels: false
  },
  grid: {
    horizontalLines: false,
    verticalLines: false
  }
})

结果如图：
Flotr2-pie

散点图

页面文档结构

1
2
3
<body>
    <div id="chart" style="width: 600px; height: 300px;"></div>
</body>

数据组织

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var pacific_data = [
  {  country: "Australia",       spending:  9.1,  life: 81.8  },
  {  country: "New Zealand",     spending: 10.1,  life: 81.0  },
];
var europe_data = [
  {  country: "Austria",         spending: 11.0,  life: 80.7  },
  {  country: "Belgium",         spending: 10.5,  life: 80.3  },
  // Data set continues...
];
var americas_data = [
  {  country: "Canada",          spending: 11.4,  life: 80.8  },
  // Data set continues...
];
var mideast_data = [
  {  country: "Israel",          spending:  7.5,  life: 81.7  },
];
var asia_data = [
  {  country: "Japan",           spending:  9.5,  life: 83.0  },
  {  country: "Korea",           spending:  7.1,  life: 80.7  },
];
var us_data = [
  {  country: "United States",   spending: 17.6,  life: 78.7  },
];

var pacific = [], europe = [], americas = [], mideast = [], asia = [], us = [];

for (var i = 0; i < pacific_data.length; i++) {
  pacific.push([pacific_data[i].spending, pacific_data[i].life]);
}
// codes continues...

绘制图表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Flotr.draw(document.getElementById('chart'), [
    { data: pacific,    label: 'Pacific',        points: { show: true } },
    { data: europe,     label: 'Europe',         points: { show: true } },
    { data: americas,   label: 'Americas',       points: { show: true } },
    { data: mideast,    label: 'Middle East',    points: { show: true } },
    { data: asia,       label: 'Asis',           points: { show: true } },
    { data: us,         label: 'United States',  points: { show: true } }
  ], {
    title: 'Life Expectancy vs. Health-Care Spending',
    subtitle: "(by country, 2010 OECD data)",
    xaxis: {
      min: 5,
      max: 25,
      tickDecimals: 0,
      title: 'Spending as Percentage of GDP',
      tickFormatter: function(val) {
        return val + '%';
      }
    },
    yaxis: {
      min: 70,
      max: 85,
      tickDecimals: 0,
      title: 'Years'
    },
    legend: {                         // 图例位置
      position: 'ne'
    }
  }
);

结果如图：
Flotr2-points

气泡图

页面文档结构

1
2
3
<body>
    <div id="chart" style="width: 600px; height: 400px;"></div>
</body>

数据组织

1
2
3
4
5
var katrina = [
  { north: 23.2, west: 75.5, wind:  35 },
  { north: 24.0, west: 76.4, wind:  35 },
  // Data set continues...
];

将源数据转换为需要的格式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function get_points(source_array, filter_function) {
  var result = [];
  for (var i = 0; i < source_array.length; i++) {
    if ((typeof filter_function === 'undefined') 
      || (typeof filter_function !== 'function') 
      || filter_function(source_array[i])) {
        result.push([
          source_array[i].west * (-1),
          source_array[i].north,
          source_array[i].wind
        ]);
    }
  }
  return result;
}

绘制图表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
Flotr.draw(document.getElementById('chart'), 
  [
    {
      data: get_points(katrina, function(obs) {
        return (obs.wind < 39);
      }),
      color: "#74add1",
      bubbles: {show:true, baseRadius: 0.3, lineWidth: 1},
    },
    // codes continues...
    {
      data: get_points(katrina, function(obs) {
        return (obs.wind >= 157);
      }),
      color: "#d73027",
      label: "Category 5",
      bubbles: {show:true, baseRadius: 0.3, lineWidth: 1},
    }
  ], {
    grid: {
      backgroundImage: 'gulf.png',
      horizontalLines: false,
      verticalLines: false
    },
    yaxis: {
      showLabels: false,
      min: 23.607,
      max: 33.657
    },
    xaxis: {
      showLabels: false,
      min: -94.298,
      max: -77.586
    },
    legend: {
      position: 'sw',
      backgroundOpacity: 0
    }
});

同时设置

1
2
3
4
.flotr-legend {
    padding: 5px;
    background-color: #ececec;
}

结果如图：
Flotr2-bubbles

雷达图

页面文档结构

1
2
3
<body>
    <div id="chart" style="width: 600px; height: 400px;"></div>
</body>

数据组织

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var players = [
  { player: 'Chris Bosh',     points: 17.2, rebounds: 7.9, assists: 1.6, steals: 0.8, blocks: 0.8 },
  { player: 'Shane Battier',  points:  5.4, rebounds: 2.6, assists: 1.2, steals: 1.0, blocks: 0.5 },
  { player: 'LeBron James',   points: 28.0, rebounds: 8.4, assists: 6.1, steals: 1.9, blocks: 0.8 },
  { player: 'Dwayne Wade',    points: 22.3, rebounds: 5.0, assists: 4.5, steals: 1.7, blocks: 1.3 },
  { player: 'Mario Chalmers', points: 10.2, rebounds: 2.9, assists: 3.6, steals: 1.4, blocks: 0.2 }
];
var team = {
  points:   98.2,
  rebounds: 41.3,
  assists:  19.3,
  steals:    8.5,
  blocks:    5.3
};

将源数据转换为需要的格式，返回一个等于队员名字的label属性，还返回一个标准化统计数据数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var get_player = function(name) {
  for (var i = 0; i < players.length; i++) {
    if (players[i].player === name) return players[i];
  }
};
var player_data = function(name) {
  var obj = {}, i = 0;
  obj.label = name;
  obj.data = [];
  for (var key in team) {
    obj.data.push([i, 100 * get_player(name)[key] / team[key]]);
    i++;
  }
  return obj;
};
var labels = [
  [0, 'Points'],
  [1, 'Rebounds'],
  [2, 'Assists'],
  [3, 'Steals'],
  [4, 'Blocks'],
];

绘制图表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Flotr.draw(document.getElementById('chart'), 
  [
    player_data('Chris Bosh'),
    player_data('Shane Battier'),
    player_data('LeBron James'),
    player_data('Dwayne Wade'),
    player_data('Mario Chalmers')
  ], {
    title: '2011/12 Miami Heat Starting Lineup - Contribution to Team Total',
    radar: {
      show: true
    },
    grid: {
      circular: true
    },
    xaxis: {
      ticks: labels
    },
    yaxis: {
      showLabels: false,
      min: 0,
      max: 33
    }
});

结果如图：
Flotr2-radar