首页用bootstrap创建一个折线表

用bootstrap创建一个折线表

时间: 2023-05-15 07:07:01 浏览: 166

非常感谢您的提问，以下是使用 Bootstrap 创建折线图的代码示例： ```html <!DOCTYPE html> <html> <head> <title>Bootstrap Line Chart</title>  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css">  <script src="https://cdn.bootcss.com/Chart.js/2.8.0/Chart.min.js"></script> </head> <body> <div class="container"> <h1>Bootstrap Line Chart</h1> <canvas id="myChart"></canvas> </div>  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.min.js"></script> <script src="https://cdn.bootcss.com/popper.js/1.15.0/umd/popper.min.js"></script>  <script src="https://cdn.bootcss.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script> // 获取 canvas 元素 var ctx = document.getElementById('myChart').getContext('2d'); // 创建 Chart 对象 var myChart = new Chart(ctx, { type: 'line', // 折线图 data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], // X 轴标签 datasets: [{ label: 'My First Dataset', // 数据集名称 data: [0, 10, 5, 2, 20, 30, 45], // 数据集 fill: false, // 不填充颜色 borderColor: 'rgb(255, 99, 132)', // 线条颜色 tension: 0.1 // 曲线张力 }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true // Y 轴从 0 开始 } }] } } }); </script> </body> </html> ``` 希望这个代码示例能够帮助到您！

阅读全文