利用CSS创建饼状、柱状图或折线图的jQuery插件：cssCharts.js
jopen
9年前
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.