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

时间:2018-11-16 05:46:23

标签: javascript css angularjs html5 plotly

我想在散点图内创建一个圆带,如下所示:

enter image description here

对于绘图带,我想给出两个输入:径向轴的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>

0 个答案:

没有答案