极区图样式总览
基本写法
首先在< 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 - 普通饼状图' } } });
