效果图:
关键代码:
var options = { legend: false, gridLines: { display: false }, // labels: { // style: { // fontSize: "16", // color: "#fff", // }, // }, tooltips: { callbacks: { title: function() { return "title"; }, beforeLabel: function(tooltipItem, data) { return "beforeLabel"; }, label: function(tooltipItem, data) { return "label"; }, afterLabel: function(tooltipItem, data) { return "afterLabel"; } } }, scale: { gridLines: { color: "#143C3A" }, angleLines: { color: "#143C3A" }, ticks: { maxTicksLimit: 4, display: false }, pointLabels: { fontSize: 12, fontColor: "#fff" } }, scaleShowLine: true, angleShowLineOut: true, scaleShowLabels: true, scaleBeginAtZero: true, angleLineColor: "rgba(0,0,0,.1)", angleLineWidth: 1, pointLabelFontFamily: "'Arial'", pointLabelFontStyle: "normal", pointLabelFontSize: 16, pointLabelFontColor: "#fff", pointDot: true, pointDotRadius: 5, pointDotStrokeWidth: 1, pointHitDetectionRadius: 40, datasetStroke: true, datasetStrokeWidth: 3, datasetFill: true, responsive: true, //字符串-图例模板 legendTemplate: '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].strokeColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>' };
文档:
http://chartjs.cn/docs/#radar-chart-example-usage