Javascript 在雷达图上绘制垂直线和水平线(如x-y轴)
使用chartjs,我想画一条水平线和一条垂直线,从雷达图的中心延伸,并在下面这样的线上显示自定义标题,有人能指导我吗Javascript 在雷达图上绘制垂直线和水平线(如x-y轴),javascript,chart.js,chartjs-2.6.0,Javascript,Chart.js,Chartjs 2.6.0,使用chartjs,我想画一条水平线和一条垂直线,从雷达图的中心延伸,并在下面这样的线上显示自定义标题,有人能指导我吗 为了方便其他用户,我使用chartjs插件绘制了轴: plugins: [{ beforeDraw: function(chart, options) { if (chart.config.data.drawXYAxes) { var
为了方便其他用户,我使用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
和paddingY
请允许我显示实际雷达图上方的箭头,否则该图将从顶部位置绘制,没有让箭头稍微向上移动的空间
drawArrow函数(贷方:)将绘制以下线条:
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));
}