Как создать круговую полосу, используя значения радиальной оси в диаграмме рассеяния, используя Plotly - PullRequest
Новая
       6

Как создать круговую полосу, используя значения радиальной оси в диаграмме рассеяния, используя Plotly

0 голосов
/ 16 ноября 2018

Я хочу создать круговую полосу внутри полярной диаграммы рассеяния следующим образом:

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...