表格中绘制多个sparkline

页面结构

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
<table>
  <thead>
    <tr>
      <th>Symbol</th>
      <th>Company</th>
      <th>2012 Performance</th>
      <th>Annual Gain (Loss)</th>
    </tr>
  </thead>
  <tbody>
    <tr class='barclays'>
      <td>AAPL</td>
      <td>Apple Inc.</td>
      <td class='sparkline'>418.68,416.11,...,532.17</td>
      <td>27%</td>
    </tr>
    <!-- data set continue... -->
    <tr>
      <td>HPQ</td>
      <td>Hewlett-Packard Company</td>
      <td class='sparkline'>25.67,25.76,...,14.25</td>
      <td>(44%)</td>
    </tr>
  </tbody>
</table>
1
2
3
4
5
6
7
8
9
10
table {
    border-spacing: 0px;
}
th, td {
    padding: 5px;
    border: 1px solid gray;
}
td.sparkline+td {
    text-align: center;
}

绘制图表

  • 默认样式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var sparkline_default = {
      lineColor: '#006363',
      fillColor: '#2d9999',
      spotColor: false,
      minSpotColor: false,
      maxSpotColor: false,
      enableTagOptions: true,
      tagOptionsPrefix: 'data-'
    };

    可以通过以data-为前缀设置自定义属性，并在sparkline()中添加一些选项

    1
    2
    3
    4
    5
    6
    <tr>
      <td>BMY</td>
      <td>Bristol Meyers Squibb Co.</td>
      <td class='sparkline' data-LineColor='#5ab7aa' data-FillColor='#a2e3d9'>32.86,32.46,...,32.24</td>
      <td>(2%)</td>
    </tr>
    1
    2
    3
    4
    var sparkline_default = {
      enableTagOptions: true,
      tagOptionsPrefix: 'data-'
    };

  • 指定class样式

    1
    2
    3
    4
    var sparkline_barclays = $.extend({}, sparkline_default, {
      lineColor: '#a50000',
      fillColor: 'fe4c4c'
    });

  • 绘制

    1
    2
    $('tr:not(.barclays) .sparkline').sparkline('html', sparkline_default);
    $('tr.barclays .sparkline').sparkline('html', sparkline_barclays);

结果展示

Sparkline-1

更复杂的sparkline

原始数据

1
2
3
4
5
var stock = [
      { date: "2012-01-03", open: 409.40, high: 422.75, low: 409.00, close: 422.40, volume: 10283900, adj_close: 416.26 },
      // data set continue...
      { date: "2012-12-31", open: 510.53, high: 535.40, low: 509.00, close: 532.17, volume: 23553300, adj_close: 529.09 },
    ];

创建复合图表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$('#stock .chart').sparkline(
  $.map(stock, function(wk) {
    return wk.volume;
  }), {
    type: "bar",
    barColor: "#fcdea2",
    height: 80,
    disableTooltips: true,
    highlightLighten: 0.8,
  }).sparkline(
    $.map(stock, function(wk) {
      return wk.adj_close;
    }), {
      composite: true,
      lineColor: "#745eb7",
      fillColor: "rgba(149, 167, 232, 0.2)",
      spotColor: false,
      minSpotColor: "#fca44e",
      maxSpotColor: "#fca44e",
      disableTooltips: true,
      highlightLighten: 0.8,
})

添加注释

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
.on('sparklineRegionChange', function(ev) {
  var idx = ev.sparklines[1].getCurrentRegionFields().offset;
  if (idx) {
    $('.info').html(
      'Week of ' + stock[idx].date + '&nbsp;&nbsp;&nbsp; Close: $' + stock[idx].adj_close
                 + '&nbsp;&nbsp;&nbsp; Volume: ' + Math.round(stock[idx].volume / 10000) / 100 + 'M'
    );
    $('details').sparkline([
      stock[idx].low,
      Math.min(stock[idx].open, stock[idx].close),
      stock[idx].adj_close,
      Math.max(stock[idx].open, stock[idx].close),
      stock[idx].high
    ], {
      type: "box",
      showOutliers: false,
      boxLineColor: "#745eb7",
      whiskerColor: "#745eb7",
      boxFillColor: "#E0E3F0",
      medianColor: (stock[idx].open < stock[idx].close) ? "#3fb582" : "#f90023"
    });
  }
}).on('mouseout', function() {
  $('.info').html('&nbsp;');
  $('.details').empty();
});

Sparkline-2