时间戳

首页 > 解决方案 > 如何使用 Plotly 在散点极坐标图中使用径向轴值创建圆形带

javascript - 如何使用 Plotly 在散点极坐标图中使用径向轴值创建圆形带

问题描述

我想在 scatterpolar 图表内创建一个圆形带，如下所示：

在此处输入图像描述

对于绘图带，我想提供两个输入：径向轴的 R_inner 和 R_outer 值，以便我可以修改带的厚度。

在当前图像中，我使用带有大小的标记绘制了波段。我给出的 HTML,JS 代码如下：

function getrandom(num, mul) {
    var value = []
    for (i = 0; i <= num; i++) {
        rand = Math.random() * mul;
        value.push(rand);
    }
    return value;
};

function get_update_data() {
    var data = [{
            type: "scatterpolargl",
            r: [50],
            theta: [0],
            mode: "markers",
            name: "Wall Radius",
            marker: {
                color: "green",
                size: 10,
                line: {
                    color: "white"
                },
                opacity: 1
            },
            cliponaxis: false
        },
        {
            type: "scatterpolargl",
            r: [0],
            theta: [0],
            mode: "markers",
            name: "Band",
            marker: {
                symbol: "circle-open",
                color: "red",
                "sizemode": "diameter",
                size: 200,
                line: {
                    width: 30
                },
                opacity: 0.3
            },
            cliponaxis: true
        },
    ];
    return data;
};

var layout = {
    title: "",
    font: {
        size: 15
    },
    polar: {
        bgcolor: "rgb(255, 255, 255)",
        angularaxis: {
            tickwidth: 2,
            linewidth: 3,
            color: "rgb(0,153,204)",
            layer: "below traces"
        },
        radialaxis: {
            side: "counterclockwise",
            showline: false,
            tickwidth: 0,
            showgrid: true,
            color: "rgb(0,153,204)",
            ticks: "",
            showticklabels: true,
        }
    },
    paper_bgcolor: "rgb(255,255,255)",
    autosize: false,
    width: 400,
    height: 400,
    margin: {
        l: 10,
        r: 10,
        b: 50,
        t: 50,
        pad: 4
    },
};

function get_update_layout() {
    return layout;
};

Plotly.newPlot('myDiv', get_update_data(), layout);
<head>
    <!-- Plotly.js -->
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
    <div id="myDiv">
        <!-- Plotly chart will be drawn inside this DIV -->
    </div>
    <script>
        <!-- JAVASCRIPT CODE GOES HERE -->
    </script>
</body>

标签： javascriptcssangularjshtmlplotly

解决方案

推荐阅读