欢迎您 本站地址:
复制网址
手机查看
切换背景
返回首页
返回编程教学
段子
图片圆角裁剪工具
淘宝副业
少儿英语书籍
文件管理源码
各国货币代码
课本点读
学习Chart.js
源代码：
html编辑器
颜色值转换
点击运行
小库网 <script src="https://cdn.staticfile.net/Chart.js/3.9.1/chart.js"></script> <canvas id="myChart" width="400" height="400"></canvas> <script> const ctx = document.getElementById('myChart'); const data = { labels: [ '一月份', '二月份', '三月份', '四月份' ], datasets: [{ type: 'bar', label: '柱形图数据集', data: [45, 49,52, 48], borderColor: 'rgb(255, 99, 132)', backgroundColor: 'rgba(255, 99, 132, 0.2)' }, { type: 'line', label: '折线图数据集', data: [50, 40, 45, 49], fill: false, borderColor: 'rgb(54, 162, 235)' }] }; const config = { type: 'scatter', data: data, options: { responsive: true, // 设置图表为响应式，根据屏幕窗口变化而变化 maintainAspectRatio: false,// 保持图表原有比例 scales: { y: { beginAtZero: true } } } }; const myChart = new Chart(ctx, config); </script>
运行结果：
小库提示
扫描下方二维码，访问手机版。
打赏
关闭