Установить цвет маркеров радарного графика - PullRequest
Новая
       13

Установить цвет маркеров радарного графика

1 голос
/ 26 февраля 2020

Я создал следующую радиолокационную карту, используя этот код. Codepen 

data = [{
  type: 'scatterpolar',
  r: [39, 28, 8, 7, 28, 39],
  theta: ['A','B','C', 'D', 'E', 'A'],
  fill: 'toself'
}]

layout = {
  polar: {
    radialaxis: {
      visible: true,
      range: [0, 50]
    }
  },
  showlegend: false
}

Plotly.newPlot("myDiv", data, layout)

Что приводит к этому: enter image description here Как я могу установить цвет каждой из точек, формирующих многоугольник?

С помощью этого инструмента, создатель онлайн-графиков , кажется, что вы можете установить цвета на шкале, но я хотел бы установить каждую из точек отдельно,

Любое направление, как настроить остальные элементы будет очень полезно.

Спасибо.

Ответы [ 2 ]

0 голосов
/ 27 февраля 2020

Существует множество возможных конфигураций, и, изучая, вы можете получить представление о любой возможной конфигурации, о которой вы можете подумать. Plotly действительно восхитителен.

Для конфигурации, которую я пытался сделать, это конфигурация: Вы можете попробовать ее на codepen 

data = [{
  type: 'scatterpolar',
  mode : "markers+lines",

  line : {
    color   :   "rgb(158, 27, 66)",
    width   :   "2",
    dash    :   "solid",
   shape    :   "linear"
 },
 r: [5, 1, 3, 2, 4, 3, 3, 2, 4, 3, 2, 3, 3, 2, 4, 2, 2],
    theta: ['Tecnologia','Innovacion','Optimismo Digital', 'Transformador', 'Atracc. y desarrollo de talento', 'Referente', 'Etica y honestidad',
            'Personas', 'Aprendizaje Continuo','Promocion del aprendizaje', 'Emprendedor', 'Escucha', 'Comunica y comparte', 'Mejora continua', 
            'Base tecnica y rigor', 'Logro', 'Crecimiento rentable' ],
 fill: 'toself',
 fillcolor: 'rgba(255, 0, 0, 0.6)',
 marker : { color : [8, 8, 8, 2, 2, 6, 6, 6, 4, 4, 4, 5, 5, 5, 3, 3, 3 ],
        colorscale : [
          [0, '#38C041'],  [0.125, '#DDD01B'],  [0.25, '#c7e9b4'],  [0.375, '#7fcdbb'],  [0.5, '#41b6c4'],  [0.625, '#1d91c0'],  [0.75, '#225ea8'],  [0.875, '#253494'],[1, '#081d58']
        ],
                size    :   10
              }

 }]

 layout = {
    polar: {
    radialaxis: {
    visible: true,
    range: [0, 7]
    }
 },
   showlegend: false,
   width: 800,
   height: 700,
   margin:{
      l :   0,
      r :   0,
      t :   100,
      b :   0,
      pad   :   0,
      autoexpand    :       true
   }


 }
0 голосов
/ 26 февраля 2020 
#myDiv path.point{
  fill: blue !important;
}

И если вы хотите дополнительно настроить цвета, вы можете использовать CSS: модификатор nth-of-type (n) https://www.w3schools.com/cssref/sel_nth-of-type.asp

data = [{
  type: 'scatterpolar',
  r: [37, 28, 8, 7, 28, 39],
  theta: ['A','B','C', 'D', 'E', 'A'],
  fill: 'toself',
  marker : { color : '#B80102'}
}]


layout = {
  polar: {
    radialaxis: {
      visible: true,
      range: [0, 50]
    }
  },
  showlegend: false
}

Plotly.newPlot("myDiv", data, layout)
#myDiv path.point{
  fill: blue !important;
}
<head>
	<!-- Load plotly.js into the DOM -->
	<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>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...