ChartJS工具测试

CDN

 <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"integrity="sha256-Uv9BNBucvCPipKQ2NS9wYpJmi8DTOEfTA/nH2aoJALw="crossorigin="anonymous"></script>

饼状图

<div id="diff"><canvas id="diffWeight"></canvas></div>

前面套一层div的原因是我发现无法设置图表大小，去百度出的解决方案。但是，这个大小设置%不行，用px可以。
我是从官网文档找到关于响应性（Responsiveness）说明：

但是设置一下宽度就行了，高度会成比例自适应。
下面是从官网截下的例子：

var ctx = document.getElementById('diffWeight').getContext('2d');var myChart = new Chart(ctx, {//图表类型type: 'bar',data: {//饼状图的X轴labels: ['A类', 'B类', 'Yellow', 'Green', 'Purple', 'Orange'],datasets: [{label: '# of Votes',//图表数据（Y轴）data: [12, 19, 3, 5, 2, 3],//每个类别的柱子的填充色和边框色backgroundColor: ['rgba(255, 99, 132, 0.2)','rgba(54, 162, 235, 0.2)','rgba(255, 206, 86, 0.2)','rgba(75, 192, 192, 0.2)','rgba(153, 102, 255, 0.2)','rgba(255, 159, 64, 0.2)'],borderColor: ['rgba(255, 99, 132, 1)','rgba(54, 162, 235, 1)','rgba(255, 206, 86, 1)','rgba(75, 192, 192, 1)','rgba(153, 102, 255, 1)','rgba(255, 159, 64, 1)'],borderWidth: 1}]},options: {//图标的标题和显示位置title:{display:true,text:"类别加权汇总",position:'bottom'}}});

展示效果：

模式总结
一个Chart对象包含用户提供的一个canvas Element和一个对象直接量（JSON格式的Object literals）。Chart.js提供的对生成的图表行为和样式（也就是）

官网

https://www.chartjs.org/docs/latest/general/accessibility.html

ChartJS工具测试相关推荐

说说初用 Mock 工具测试碰到的坑
说说初用 Mock 工具测试碰到的坑我是一个在校实习生,作为一个程序猿,是个菜鸟中战斗机!对于测试,只写过一点点简单到不能再简单了的 Junit 单元测试的例子(因为当时这足以应付学校课程的内容与要 ...
利用ping/ipconfig/nslookup/dig/whois简单工具测试DNS
利用ping/ipconfig/nslookup/dig/whois简单工具测试DNS 2010-09-21 23:08:54 标签:dig mx ptr nslookup dns [推送到技术圈] ...
微信开发者工具测试小程序
使用微信开发者工具测试小程序 1.安装微信开发者工具.VS code工具 2.拉代码到本地,通过git clone 代码仓库路径下载代码 3.用VS code生成dist文件 VS code打开拉取到 ...
使用appfox工具测试登录有图片验证码接口的问题
环境简介服务器环境(运行在虚拟机之上): 环境环境名称操作系统 Win10 1905 专业版数据库 sqlserver 2008R2 本机环境: 环境环境名称操作系统 win10 1905 ...
使用MultiPowerOnOffTool工具测试拔插网线对路由器的影响
使用MultiPowerOnOffTool工具测试拔插网线对路由器的影响: 链接:https://pan.baidu.com/s/1Y1wxa4RnmAB4t3zKvSoY_g 提取码:xxxx 1 ...
使用浏览器传感器工具测试手机陀螺仪效果
1 先附上效果图上面界面的打开过程是,任意网页,按f12,然后选择跟多工具,里面的传感器选项即可 2 原理 web端提供了deviceorientation事件,支持检测设备方向变化:那么可以根据设 ...
如何用微信web开发者工具测试调试并打包上传小程序
厦门四六开科技给大家讲讲如何用微信web开发者工具测试调试并打包上传小程序,其实还是很简单的,这个教程针对小白,大神请直接略过. 一.下载并安装软件(根据自己电脑实际情况选择版本安装) 如何用微信开 ...
好用的测试工具-测试读写-fio-iozone
好用的测试工具(测试存储读写) fio工具测试存储性能:随机读写的IOPS次数每秒和带宽顺序读写的IOPS和带宽二选一 wget http://brick.kernel.dk/snaps/fio ...
iperf3工具测试带宽、上下行速率TCP 测试
iperf3工具测试带宽.上下行速率TCP 测试 1.简介对于通信有严格要求时,我们都会先对传输的带宽及上下行速率做测试,一般使用Iperf3,在windows下和linux下或arm linux都 ...

ChartJS工具测试

CDN

饼状图

官网

ChartJS工具测试相关推荐

最新文章

热门文章