利用CSS創建餅狀、柱狀圖或折線圖的jQuery插件：cssCharts.js
jQuery插件用于利用dom節點和CSS創建簡單餅狀、柱狀圖或折線圖。
Include:
<link rel="stylesheet" href="chart.css"> <script src="jquery.chart.js"></script>
run:
$('.bar-chart').cssCharts({type:"bar"});
$('.donut-chart').cssCharts({type:"donut"});
$('.line-chart').cssCharts({type:"line"}); example donut/pie chart
optional: to trigger countUp counter for the donut chart as seen on the preview page.
$('.donut-chart').cssCharts({type:"donut"}).trigger('show-donut-chart');add "pie-chart" class to .donut-chart if you want to convert it to a pie chart, i.e
<div class="donut-chart pie-chart" data-percent="0.61" data-title="uptime %"></div>
example line chart
<ul data-cord="[x1,x2,x3,x4],[y1,y2,y3,y4]" class="line-chart"></ul>
$('.line-chart').cssCharts({type:"line"});- insure x cordinates are 0 - ascending.
- insure y cordinates are 0 or greater.
example bar chart
<ul class="bar-chart" data-bars="[x1,x2],[y1,y2]" data-max="10" data-unit="k" data-grid="1" data-width="24">
$('.bar-chart').cssCharts({type:"bar"});style to your hearts content, see index.html for an example implementation.
本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！