一、基本用法:
alertShow(param: any, $index: any) {
let $log = this.$log
let $scope = this.$scope
if (param !== $scope.lastObj) {
param.show = true
if ($scope.lastObj !== null) {
$scope.lastObj.show = false
}
$scope.lastObj = param
$scope.radarAlert = true
if ($index === 0) {
$(".radarChart_alert").css({left: $scope.arr[$index].x + 100 + "px", top: $scope.arr[$index].y + "px"})
} else {
$(".radarChart_alert").css({left: $scope.arr[$index].x, top: $scope.arr[$index].y + 40 + "px"})
}
}
}
drawRadarChart() {
$scope.radarChartCategroy = [
{name1: "词汇短语", name2: "排名前34%", show: false},
{name1: "口语运用", name2: "排名前34%", show: false},
{name1: "听力理解", name2: "排名前34%", show: false},
{name1: "阅读理解", name2: "排名前34%", show: false},
{name1: "语法句法", name2: "排名前34%", show: false}
]
let $scope = this.$scope
let width: any, long: any, samll: any, big: any
getWidth()
function getWidth() {
width = $(".nav").width()
$(".radarChart_div").height(width)
$(".nav").height(width)
$("#radarChart").attr({width: width, height: width})
long = width / 2
samll = (width / 2) * Math.tan(36 * Math.PI / 180)
big = (width / 2) / Math.cos(36 * Math.PI / 180)
window.requestAnimationFrame(draw)
let radarBtnWidth = $(".radarChart_select").width()
let radarBtnHeight = $(".radarChart_select").height()
$scope.arr = [
{x: long - radarBtnWidth / 2, y: 5 - radarBtnHeight - 15},
{x: -radarBtnWidth - 5, y: samll + 5 - radarBtnHeight / 2},
{x: big * Math.sin(18 * Math.PI / 180) - radarBtnWidth * 2 / 3, y: big * Math.cos(18 * Math.PI / 180) + samll + radarBtnHeight / 2},
{x: big * Math.sin(18 * Math.PI / 180) + big - radarBtnWidth / 3, y: big * Math.cos(18 * Math.PI / 180) + samll + radarBtnHeight / 2},
{x: 2 * long + 5, y: samll + 5 - radarBtnHeight / 2}
]
for (let i = 0
$(".radarChart_select").eq(i).css({left: $scope.arr[i].x + "px", top: $scope.arr[i].y + "px"})
}
}
function draw() {
let canvas = document.getElementById("radarChart")
if (canvas.getContext) {
var ctx = canvas.getContext("2d")
ctx.clearRect(0, 0, width, width)
ctx.beginPath()
ctx.lineWidth = 1
ctx.lineJoin = "miter"
ctx.strokeStyle = "rgba(255,255,255,.5)"
ctx.moveTo(long, 5)
ctx.lineTo(0, samll + 5)
ctx.lineTo(big * Math.sin(18 * Math.PI / 180), big * Math.cos(18 * Math.PI / 180) + samll + 5)
ctx.lineTo(big * Math.sin(18 * Math.PI / 180) + big, big * Math.cos(18 * Math.PI / 180) + samll + 5)
ctx.lineTo(2 * long, samll + 5)
ctx.lineTo(long, 5)
ctx.moveTo(long, long / Math.sin(72 * Math.PI / 180))
ctx.lineTo(long, 5)
ctx.moveTo(long, long / Math.sin(72 * Math.PI / 180))
ctx.lineTo(0, samll + 5)
ctx.moveTo(long, long / Math.sin(72 * Math.PI / 180))
ctx.lineTo(big * Math.sin(18 * Math.PI / 180), big * Math.cos(18 * Math.PI / 180) + samll + 5)
ctx.moveTo(long, long / Math.sin(72 * Math.PI / 180))
ctx.lineTo(big * Math.sin(18 * Math.PI / 180) + big, big * Math.cos(18 * Math.PI / 180) + samll + 5)
ctx.moveTo(long, long / Math.sin(72 * Math.PI / 180))
ctx.lineTo(2 * long, samll + 5)
ctx.stroke()
ctx.save()
ctx.beginPath()
ctx.fillStyle = "rgba(255,255,255,.5)"
ctx.moveTo(long, long / Math.sin(72 * Math.PI / 180) - $scope.num + 5)
ctx.lineTo(long - $scope.num * Math.sin(72 * Math.PI / 180), long / Math.sin(72 * Math.PI / 180) - $scope.num * Math.cos(72 * Math.PI / 180) + 5)
ctx.lineTo(long - $scope.num * Math.sin(36 * Math.PI / 180), long / Math.sin(72 * Math.PI / 180) + $scope.num * Math.cos(36 * Math.PI / 180) + 5)
ctx.lineTo(long + $scope.num * Math.sin(36 * Math.PI / 180), long / Math.sin(72 * Math.PI / 180) + $scope.num * Math.cos(36 * Math.PI / 180) + 5)
ctx.lineTo(long + $scope.num * Math.sin(72 * Math.PI / 180), long / Math.sin(72 * Math.PI / 180) - $scope.num * Math.cos(72 * Math.PI / 180) + 5)
// ctx.lineTo(long, long / Math.sin(72 * Math.PI / 180) - $scope.num + 5)
ctx.fill()
ctx.save()
ctx.restore()
if ($scope.time2 < 60) {
window.requestAnimationFrame(draw)
$scope.num = $scope.num + long / 60
$scope.time2 = $scope.time2 + 1
}
}
}
}
}
<div>
<div class="radarChart_div"></div>
<div class="nav">
<canvas id="radarChart"></canvas>
<div class="radarChart_select" ng-repeat="item in radarChartCategroy" ng-click="events.alertShow(item, $index)"
ng-class="{'radarChart_select_true':item.show,'radarChart_select_flase':!item.show}">
<div>{{item.name1}}</div>
<div>{{item.name2}}</div>
</div>
<div class="radarChart_alert" ng-style="radarAlert ? {'display': 'flex'} : {'display': 'none'}">
<div>213道</div>
<div>72%</div>
<div>正确答题</div>
<div>正确率</div>
</div>
</div>
<div class="radarChart_div"></div>
</div>