bootstrap插件Charts制作图表

来源：互联网发布：淘宝同款插件编辑：程序博客网时间：2024/05/24 05:59
开发工具：notpad++；
css文件：bootstrap.min.css，datepicker3.css，styles.css；
js文件：jquery-1.11.1.min.js，bootstrap.min.js，bootstrap-datepicker.js，chart.min.js，chart-data.js，easypiechart.js，easypiechart-data.js
charts.html
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>bootstrap_Charts</title><link href="css/bootstrap.min.css" rel="stylesheet"><link href="css/datepicker3.css" rel="stylesheet"><link href="css/styles.css" rel="stylesheet"><script src="js/jquery-1.11.1.min.js"></script><script src="js/bootstrap.min.js"></script><script src="js/chart.min.js"></script><script src="js/chart-data.js"></script><script src="js/easypiechart.js"></script><script src="js/easypiechart-data.js"></script><script src="js/bootstrap-datepicker.js"></script><!--[IE 9]><script src="js/html5shiv.js"></script><script src="js/respond.min.js"></script><![end]--><script>!function ($) {    $(document).on("click","ul.nav li.parent > a > span.icon", function(){                  $(this).find('em:first').toggleClass("glyphicon-minus");          });     $(".sidebar span.icon").find('em:first').addClass("glyphicon-plus");}(window.jQuery);$(window).on('resize', function () {  if ($(window).width() > 768) $('#sidebar-collapse').collapse('show')})$(window).on('resize', function () {  if ($(window).width() <= 767) $('#sidebar-collapse').collapse('hide')})</script></head><body><nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"><div class="container-fluid"><div class="navbar-header"><a class="navbar-brand" href="#"><span>头部</span>菜单栏</a></div></div><!-- /.container-fluid --></nav><div id="sidebar-collapse" class="col-sm-3 col-lg-2 sidebar"><ul class="nav menu"><li><h1>左</h1></li><li><h1>侧</h1></li><li><h1>菜</h1></li><li><h1>单</h1></li><li><h1>栏</h1></li></ul></div><!--/.sidebar--><div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main"><div class="row"><div class="col-lg-12"><h1 class="page-header">Charts</h1></div></div><!--/.row--><div class="row"><div class="col-lg-12"><div class="panel panel-default"><div class="panel-heading">Line Chart</div><div class="panel-body"><div class="canvas-wrapper"><canvas class="main-chart" id="line-chart" height="200" width="600"></canvas></div></div></div></div></div><!--/.row--><div class="row"><div class="col-lg-12"><div class="panel panel-default"><div class="panel-heading">Bar Chart</div><div class="panel-body"><div class="canvas-wrapper"><canvas class="main-chart" id="bar-chart" height="200" width="600"></canvas></div></div></div></div></div><!--/.row--><div class="row"><div class="col-md-6"><div class="panel panel-default"><div class="panel-heading">Pie Chart</div><div class="panel-body"><div class="canvas-wrapper"><canvas class="chart" id="pie-chart" ></canvas></div></div></div></div><div class="col-md-6"><div class="panel panel-default"><div class="panel-heading">Doughnut Chart</div><div class="panel-body"><div class="canvas-wrapper"><canvas class="chart" id="doughnut-chart" ></canvas></div></div></div></div></div><!--/.row--><div class="row"><div class="col-xs-6 col-md-3"><div class="panel panel-default"><div class="panel-body easypiechart-panel"><h4>Label:</h4><div class="easypiechart" id="easypiechart-blue" data-percent="92" ><span class="percent">92%</span></div></div></div></div><div class="col-xs-6 col-md-3"><div class="panel panel-default"><div class="panel-body easypiechart-panel"><h4>Label:</h4><div class="easypiechart" id="easypiechart-orange" data-percent="65" ><span class="percent">65%</span></div></div></div></div><div class="col-xs-6 col-md-3"><div class="panel panel-default"><div class="panel-body easypiechart-panel"><h4>Label:</h4><div class="easypiechart" id="easypiechart-teal" data-percent="56" ><span class="percent">56%</span></div></div></div></div><div class="col-xs-6 col-md-3"><div class="panel panel-default"><div class="panel-body easypiechart-panel"><h4>Label:</h4><div class="easypiechart" id="easypiechart-red" data-percent="27" ><span class="percent">27%</span></div></div></div></div></div><!--/.row--></div><!--/.main--></body></html>
阅读全文
0 0