表格中绘制多个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