Chart.js-极区图分析(参数分析+例图)
2023-03-14 22:53:47 时间
极区图样式总览
基本写法
首先在< script >标签里面引入chart.js:
<script src="chart.js/Chart.js"></script>
然后创建一个画布:
<canvas id="myChart" width="400" height="400"></canvas>
最后写js代码:
var ctx = $('#myChart'); var myChart = new Chart(ctx, { type: 'polarArea', data: { labels: ['徐凤年', '裴南苇', '曹长卿', '李淳罡', '王仙芝', '温华'], datasets: [{ label: '# of 战力', data: [100, 110, 120, 70, 140, 10], backgroundColor: [ '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)' ], borderColor:'black', borderWidth: 2 }] }, options: { title: { display: true, text: '饼状图1 - 普通饼状图' } } });
参数解析
【注意】以下都是写入在datasets中的参数:
参数名 | 类型 | 说明 | 默认值 |
backgroundColor | Color | 背景色。如果值为Array,只取Array[0] | 'rgba(0, 0, 0, 0.1)' |
borderColor | Color | 边框色。可取Array类型的Color | 'rgba(0, 0, 0, 0.1)' |
borderWidth | number | 略 | 3 |
hoverBackgroundColor | Color | 略 | undefined |
hoverBorderColor | Color | 略 | undefined |
hoverBorderWidth | number | 略 | undefined |
label | string | 标签,图例和工具提示中的数据集标签。 | '' |
data | object[] | required | 数据结构为数组,是柱状图对应的值。 |
极区图1 - 普通极区图
var ctx = $('#myChart'); var myChart = new Chart(ctx, { type: 'polarArea', data: { labels: ['徐凤年', '裴南苇', '曹长卿', '李淳罡', '王仙芝', '温华'], datasets: [{ label: '# of 战力', data: [100, 110, 120, 70, 140, 10], backgroundColor: [ '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)' ], borderColor:'black', borderWidth: 2 }] }, options: { title: { display: true, text: '饼状图1 - 普通饼状图' } } });
相关文章
- 让结对编程更有效的十种方法
- 结对编程 VS 代码审查:对比开发者文化
- 微服务限流容错降级Sentinel实战
- C#程序员经常用到的10个实用代码片段
- 让程序员精神分裂的9件事
- PHP 性能分析与实验——性能的宏观分析
- 从Slf4j源码角度分析阿里开发手册日志规约
- 真香!微软出Go语言教程了(中文版)
- 字节二面:优化HTTPS的手段,你知道几个?
- 每位新手程序员都应当了解的七条箴言
- Reddit引爆框架决战!TensorFlow遭吐槽
- 字节跳动最爱考的前端面试题:计算机网络基础
- 从RocketMQ的Broker源码层面验证一下这两个点
- 程序员要如何学英语?
- 程序员该如何应对老板和客户的施压
- 从把三千行代码重构成15行代码谈起
- 独立程序员如何赚钱致富
- 半路学编程,可以成为大牛程序员吗?
- 奇怪的知识点:用代码run代码
- 关于烂代码的那些事