sparkline 报表控件

来源：互联网发布：淘宝男鞋店知乎编辑：程序博客网时间：2024/05/16 11:41

http://omnipotent.net/jquery.sparkline/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>

        /* 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 chart type */
$('.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'} );
  var mycolor=['red','green','black','gray','yellow','blue','green'];
  $('.pie').sparkline(myvalues,{type:'pie',sliceColors:mycolor,width:'200px',height:'200px'});
    });
    </script>
</head>
<body>

<p>
Inline Sparkline: <span class="inlinesparkline">1,4,4,7,5,9,10</span>.
</p>
<p>
Sparkline with dynamic data: <span class="dynamicsparkline">Loading..</span>
</p>
<p>
Bar chart with dynamic data: <span class="dynamicbar">Loading..</span>
</p>
<p>
Bar chart with inline data: <span class="inlinebar">1,3,4,5,3,5</span>
</p>
Bar chart with inline data: <span class="pie" style="width:200px;">1,3,4,5,3,5</span>
</p>
<div style="width:100px; height:20px;background-color:red;"></div>
</body>
</html>