[英]Draw vertical and horizonal lines on the radar chart (like x-y axes)
For the benefit of other users, I drew the axes with the chartjs plugins: 为了其他用户的利益,我使用chartjs插件绘制了坐标轴:
plugins: [{
beforeDraw: function(chart, options) {
if (chart.config.data.drawXYAxes) {
var ctx = chart.chart.ctx;
var yaxis = chart.scales['scale'];
var paddingX = 100;
var paddingY = 40;
ctx.save();
ctx.beginPath();
ctx.strokeStyle = '#0000ff';
ctx.lineWidth = 0.75;
drawArrow(ctx, yaxis.xCenter, yaxis.yCenter, yaxis.xCenter - yaxis.drawingArea - paddingX, yaxis.yCenter);
drawArrow(ctx, yaxis.xCenter, yaxis.yCenter, yaxis.xCenter + yaxis.drawingArea + paddingX, yaxis.yCenter);
drawArrow(ctx, yaxis.xCenter, yaxis.yCenter, yaxis.xCenter, yaxis.yCenter - yaxis.drawingArea - paddingY);
drawArrow(ctx, yaxis.xCenter, yaxis.yCenter, yaxis.xCenter, yaxis.yCenter + yaxis.drawingArea + paddingY);
ctx.stroke();
ctx.restore();
}
}
}]
paddingX
and paddingY
allow me to show the arrows above the actual radar chart, otherwise the chart will be drawn from top position leaving no room for arrow to go little up. paddingX
和paddingY
允许我在实际雷达图上方显示箭头,否则该图将从顶部位置绘制,而箭头没有上扬的空间。
drawArrow function (credit: https://stackoverflow.com/a/6333775/1624330 ) will draw the line: drawArrow函数(credit: https ://stackoverflow.com/a/6333775/1624330)将画线:
drawArrow = function(context, fromx, fromy, tox, toy) {
var headlen = 10;
var dx = tox - fromx;
var dy = toy - fromy;
var angle = Math.atan2(dy, dx);
context.moveTo(fromx, fromy);
context.lineTo(tox, toy);
context.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
context.moveTo(tox, toy);
context.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.