jQuery Sparklines Simple Example 示例

HTML

CSS

JavaScript

HTML

<!DOCTYPE html>
<html lang="zh" >
<head>
<meta charset="UTF-8">
<title>jQuery Sparklines Simple Example</title>
</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>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-sparklines/2.1.2/jquery.sparkline.min.js"></script>
</body>
</html>

CSS

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; }

JavaScript

/* <![CDATA[ */
$(function() {
    /** This code runs when everything has been loaded on the page */
    /* Inline sparklines take their values from the contents of the tag */
    $('.inlinesparkline').sparkline(); 

    /* 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'} );

});
/* ]]> */