在雷达图上绘制垂直和水平线（线 x-y 轴）答案

【问题标题】：Draw vertical and horizonal lines on the radar chart (like x-y axes)在雷达图上绘制垂直和水平线（线 x-y 轴）
【发布时间】：2020-01-15 22:04:25
【问题描述】：

使用chartjs，我想画一条从雷达图中心延伸的水平线和一条垂直线，并在下面的线上显示自定义标题，有人可以指导我吗？

【问题讨论】：

标签： javascript chart.js chartjs-2.6.0

【解决方案1】：

为了其他用户的利益，我用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 函数（信用：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));
}

【讨论】：