我想在散点图内创建一个圆带,如下所示:
对于绘图带,我想给出两个输入:径向轴的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>