javascript - Plotly.js 极坐标图代表 CIELab 添加渐变圆

Question

我需要绘制一张 CIELab 图表，如下图所示。

我设法使用 Plotly 重新创建了几乎所有内容，但我不知道如何添加表示颜色空间的渐变圆。我尝试将图像添加为背景，但是当我放大或缩小时它没有被缩放。有没有办法做到这一点？另外，为什么平移按钮不显示在模式栏中？

这就是我得到的：

这是我写的代码：

        var layout = {
            showlegend: false,
            polar: {
                domain: {
                    x: [0, 1],
                    y: [0, 1]
                },
                radialaxis: {
                    tickfont: {
                        size: 8
                    },
                    range: [0, 120]
                },
                angularaxis: {
                    tickfont: {
                        size: 8
                    },
                    rotation: 0,
                    direction: "counterclockwise",
                    dtick: 30
                },
                bgcolor: "rgba(0,0,0,0)"
            }
        }
        
        var initializeData = function(radius, angles, colors) {
            var data = [
                {
                    type: "scatterpolar",
                    mode: "markers",
                    r: radius,
                    theta: angles,
                    line: {
                        color: "#ff66ab"
                    },
                    marker: {
                        color: colors,
                        symbol: "circle",
                        size: 12
                    },
                    subplot: "polar"
                }
            ];

            Plotly.newPlot('tester', data, layout, {scrollZoom: true, displaylogo: false});
        }