快速入门

要向您的网页添加一些Sparklines，您需要做四件事：

1. 加载到页面中的jQuery javascript 库 - 至少版本 1.4.3 或更高
2. 加载到页面中的 jquery.sparkline.js 副本，您可以从此站点下载
3. 页面上用于显示迷你图的内联标记（例如 `<span>`）
4. 调用 `sparkline()` 函数以实际显示迷你图。

此外，在标准模式下呈现页面（请参阅下面示例中的 DOCTYPE 声明）最大限度地提高与 Internet Explorer 的兼容性。

这是一个简单的网页，将显示一些迷你图：

```html

<!DOCTYPE html>
<html lang="zh" >
<head>
<meta charset="UTF-8">
<title>jQuery Sparklines Simple Example</title>
<style>
body { 
    color: #4d5259;
    font-size: 16px;
    font-family: "Microsoft JhengHei","Microsoft YaHei",Helvetica,"Meiryo UI","Malgun Gothic","Segoe UI","Trebuchet MS","Monaco",monospace,Tahoma,STXihei,"华文细黑",STHeiti,"Helvetica Neue","Droid Sans","wenquanyi micro hei",FreeSans,Arimo,Arial,SimSun,"宋体",Heiti,"黑体",sans-serif;
    padding: 0px;
    margin: 0px;
    line-height: 32px;
}
</style>
</head>

<body>
<h3>简单迷你图示例</h3>
<p>
内联迷你图：<span class="inlinesparkline">1,4,4,7,5,9,10</span>.
</p>
<p>
带动态数据的迷你图：<span class="dynamicsparkline">Loading..</span>
</p>
<p>
带动态数据的条形图：<span class="dynamicbar">Loading..</span>
</p>
<p>
带内联数据的条形图：<span class="inlinebar">1,3,4,5,3,5</span>
</p>

/* Sparklines can also take their values from the first argument passed to the sparkline() function */
    var myvalues = [10,8,5,7,4,4,1];
    $('.dynamicsparkline').sparkline(myvalues);

/* The second argument gives options such as specifying you want a bar chart */
    $('.dynamicbar').sparkline(myvalues, {type: 'bar', barColor: 'green'} );

/* Use 'html' instead of an array of values to pass options to a sparkline with data in the tag */
    $('.inlinebar').sparkline('html', {type: 'bar', barColor: 'red'} );

});
/* ]]> */
</script>
</body>
</html>
```

如示例所示，要在迷你图中使用的值可以在要用作目标的标记内内联提供，也可以作为第一个参数传递给 `sparkline()` 函数。

要绘制不同类型的图表，或将一个图表叠加在另一个之上，或将图表显示到隐藏层中，请继续阅读。

### 所有示例
<iframe src="http://example.itshubao.com/inexample/321.html" width="100%" height="820px" frameborder="0" scrolling="no"></iframe>