Sparkline 小图表

使用说明 PLUGIN

Sparkline插件是优秀的图表插件，他的特点是图表简洁，没有坐标也没有标注，更重要的是它可以与文字并排显示。与其说他是图表更不如说他是可编辑的图片。本框架目前所使用的版本是v2.1.2，详见官网。

该插件依赖jquery，在引入jquery之后，再引入该插件即可。简单举例如下：

通过HTML创建图表：1,4,4,7,5,9,10,2,6,2,9,10

通过变量创建图表：加载中...

使用更多参数：加载中...

通过HTML创建图表并使用更多参数：9,5,11,1,3,4,5,3,5

<script src='src/plugins/sparkline/jquery.sparkline.min.js'></script>
<script type='text/javascript'>
    $(document).ready(function () {
        $('.chart-html').sparkline();
        var values = [10,8,5,7,4,8,5,11,8,9,1];
        $('.chart-var').sparkline(values);
        $('.chart-para').sparkline(values, {type: 'line', fillColor: 'green'} );
        $('.chart-mult').sparkline('html', {type: 'line', lineColor: 'red'} );
    });
</script>

                                <p>通过HTML创建图表：<span class="chart-html">1,4,4,7,5,9,10,2,6,2,9,10</span></p>
                                <p>通过变量创建图表：<span class="chart-var">加载中...</span></p>
                                <p>使用更多参数：<span class="chart-para">加载中...</span></p>
                                <p>通过HTML创建图表并使用更多参数：<span class="chart-mult">9,5,11,1,3,4,5,3,5</span></p>

图表类型

Sparkline图表支持折线图(Line Charts)，饼图(Pie Charts)，柱状图(Bar Charts)，三态图(Tristate Charts)，离散图(Discrete Charts)，项目图(Bullet Graphs)，箱图(Box Plots)。每种图表类型的参数均有不同，详细请查阅官网。

5,6,7,9,9,5,3,2,2,4,6,7

1,1,2

5,6,7,2,0,-4,-2,4

1,1,0,1,-1,-1,1,-1,0,0,1,1

4,6,7,7,4,3,2,1,4,4

10,12,12,9,7

4,27,34,52,54,59,61,68,78,82,85,87,91,93,100

<script src='src/plugins/sparkline/jquery.sparkline.min.js'></script>
<script type='text/javascript'>
    $(document).ready(function () {
        $(".chart-line").sparkline('html', {type: 'line',width:'100',height:'80'});
        $(".chart-pie").sparkline('html', {type: 'pie',width:'100',height:'80'});
        $(".chart-bar").sparkline('html', {type: 'bar',width:'100',height:'80'});
        $(".chart-tristate").sparkline('html', {type: 'tristate',width:'100',height:'80'});
        $(".chart-discrete").sparkline('html', {type: 'discrete',width:'100',height:'80'});
        $(".chart-bullet").sparkline('html', {type: 'bullet',width:'100',height:'80'});
        $(".chart-box").sparkline('html', {type: 'box',width:'100',height:'80'});
    });
</script>

                                <div class="ax-row">
                                    <div class="ax-col"><span class="chart-line">5,6,7,9,9,5,3,2,2,4,6,7</span></div>
                                    <div class="ax-col"><span class="chart-pie">1,1,2 </span></div>
                                    <div class="ax-col"><span class="chart-bar">5,6,7,2,0,-4,-2,4 </span></div>
                                    <div class="ax-col"><span class="chart-tristate">1,1,0,1,-1,-1,1,-1,0,0,1,1 </span></div>
                                    <div class="ax-col"><span class="chart-discrete">4,6,7,7,4,3,2,1,4,4 </span></div>
                                    <div class="ax-col"><span class="chart-bullet">10,12,12,9,7 </span></div>
                                    <div class="ax-col"><span class="chart-box">4,27,34,52,54,59,61,68,78,82,85,87,91,93,100 </span></div>
                                </div>

图表叠加

在构建图表时，在第二个图表使用composite:true属性，则可以在第一个图表的上方叠加另外一个图表。

<script src='https://cdn.bootcdn.net/ajax/libs/jquery-sparklines/2.1.2/jquery.sparkline.min.js'></script>
<script type='text/javascript'>
    $(document).ready(function () {
        $(".chart-composite").sparkline([15,23,45,20,54,45,35,57,30,45,35,57,30],{type:"line",width:"100%",height:"100"});
        $(".chart-composite").sparkline([8,20,54,45,35,17,13,14,10,45],{type:"line",composite:true});
        $(".chart-composite2").sparkline([15,23,45,20,54,45,35,57,30,45,35,57,30],{type:"bar",width:"100%",height:"100",barSpacing: 10,});
        $(".chart-composite2").sparkline([8,20,54,45,35,17,13,14,10,45],{type:"line",fillColor: 'transparent',composite:true});
    });
</script>

                               <div class="ax-row">
                                    <div class="ax-col"><div class="chart-composite"></div></div>
                                    <div class="ax-col"><div class="chart-composite2"></div></div>
                                </div>