雷达图样式总览
基本写法
首先在< 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: 'radar', data: { labels: ['徐凤年', '裴南苇', '曹长卿', '李淳罡', '王仙芝', '温华'], datasets: [{ label: '# of 战力', data: [100, 110, 120, 70, 140, 10], backgroundColor: 'rgba(54, 162, 235, 0.2)', borderColor:'rgba(153, 102, 255, 0.5)', borderWidth: 2, fill:false },{ label: '# of 年龄', data: [24, 38, 55, 93, 82, 23], backgroundColor: 'rgba(54, 162, 235, 0.2)', borderColor:'red', borderWidth: 2, lineTension:0, fill:false },{ label: '# of 相貌', data: [100, 10, 80, 3, 5, 4], backgroundColor: 'rgba(54, 162, 235, 0.2)', borderColor:'rgba(255, 206, 86, 0.9)', borderWidth: 2, fill:false, borderDash:[5] }] }, options: { title: { display: true, text: '雷达图 - 普通线形图（直线、虚线）' } } });
参数解析
【注意】以下都是写入在datasets中的参数：
| 参数名 | 类型 | 说明 | 默认值 |
backgroundColor |
Color |
背景色。如果值为Array，只取Array[0] | 'rgba(0, 0, 0, 0.1)' |
borderColor |
Color |
边框色。可取Array类型的Color | 'rgba(0, 0, 0, 0.1)' |
borderDash |
number[] |
设置虚线。若设为[1,3],代表以1和3作为缺失绘制虚线 | [] |
borderWidth |
number |
略 | 3 |
fill |
boolean|string |
是否填充曲线底部 | true |
hoverBackgroundColor |
Color |
略 | undefined |
hoverBorderCapStyle |
string |
略 | undefined |
hoverBorderColor |
Color |
略 | undefined |
hoverBorderDash |
number[] |
略 | undefined |
hoverBorderDashOffset |
number |
略 | undefined |
hoverBorderJoinStyle |
string |
略 | undefined |
hoverBorderWidth |
number |
略 | undefined |
label |
string |
标签，图例和工具提示中的数据集标签。 | '' |
lineTension |
number |
曲线的平滑度。为0时，绘制直线 | 0.4 |
pointBackgroundColor |
Color |
略 | 'rgba(0, 0, 0, 0.1)' |
pointBorderColor |
Color |
略 | 'rgba(0, 0, 0, 0.1)' |
pointBorderWidth |
number |
略 | 1 |
pointHitRadius |
number |
略 | 1 |
pointHoverBackgroundColor |
Color |
略 | undefined |
pointHoverBorderColor |
Color |
略 | undefined |
pointHoverBorderWidth |
number |
略 | 1 |
pointHoverRadius |
number |
略 | 4 |
pointRadius |
number |
略 | 3 |
pointRotation |
number |
略 | 0 |
pointStyle |
string|Image |
点的类型。可选值有：'circle'、 'cross'、 'crossRot'、 'dash'、 'line'、 'rect'、 'rectRounded'、 'rectRot'、 'star'、 'triangle' | 'circle' |
# 雷达图 - 普通线形图（直线、虚线）
var ctx1 = $('#myChart1'); var myChart = new Chart(ctx1, { type: 'radar', data: { labels: ['徐凤年', '裴南苇', '曹长卿', '李淳罡', '王仙芝', '温华'], datasets: [{ label: '# of 战力', data: [100, 110, 120, 70, 140, 10], backgroundColor: 'rgba(54, 162, 235, 0.2)', borderColor:'rgba(153, 102, 255, 0.5)', borderWidth: 2, fill:false },{ label: '# of 年龄', data: [24, 38, 55, 93, 82, 23], backgroundColor: 'rgba(54, 162, 235, 0.2)', borderColor:'red', borderWidth: 2, lineTension:0, fill:false, lineTension:1 },{ label: '# of 相貌', data: [100, 10, 80, 3, 5, 4], backgroundColor: 'rgba(54, 162, 235, 0.2)', borderColor:'rgba(255, 206, 86, 0.9)', borderWidth: 2, fill:false, borderDash:[5] }] }, options: { title: { display: true, text: '雷达图 - 普通线形图（直线、虚线）' } } });
