Блог

Главная - Вопросы по программированию - Невозможно расширить трассировки, установив тип маркера

Невозможно расширить трассировки, установив тип маркера

#javascript #plotly #marker #extend #area

#javascript #плотный #маркер #расширить #область

Вопрос:

С помощью приведенного ниже кода я пытаюсь создать простую пузырьковую диаграмму. Я создаю трассировку, чтобы расширить ее позже:

     var t9 = {
        x: [100821],
        y: [11],
        name: 'Some text',
        text: ['Some text'],
        mode: ['markers'],
        marker: [{
          size: [1531*10],
          sizeref: 2,
          sizemode: 'area'
        }]
      };
    var data = [t9];


var layout = {
  title: 'Chart',
  showlegend: true,
  xaxis: {
    title: 'Some text'
  },
  yaxis: {
    title: 'Some text'
  }
};

var config = {responsive: true}

Plotly.newPlot('plot', data, layout, config);



        Plotly.extendTraces(
          'plot', 
        {
          x: [[5491]],
          y: [[5]],
          text: [['Some text']],
          mode: [['markers']],
          marker: [[{
            size: 123*100,
            sizeref: 2,
            sizemode: 'area'
          }]]
        }, [0]);

        

        Plotly.extendTraces(
          'plot', 
        {
          x: [[60022]],
          y: [[11]],
          text: [['Some text']],
          mode: [['markers']],
          marker: [[{
            size: 982*100,
            sizeref: 2,
            sizemode: 'area'
          }]]
        }, [0]); 
 <head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<html>
  <body>
    <div id="plot"></div>
  </body>
</html>

Результат таков:
Результат

Как вы можете видеть, маркеры не принимают свойство mode: ['markers'] и все markers: свойства.

Есть идеи, как получить результат, подобный на этой странице? https://plotly.com/javascript/bubble-charts /

Ответ №1:

  • Если вы используете extendTraces и хотите обновить свойства, такой размер маркера, вам необходимо предоставить атрибут в виде строки, например marker.size , а значение должно быть массивом, как и ваши новые значения x и y. 
     Plotly.extendTraces(
  'plot', 
  {
    x: [[5491]],
    y: [[5]],
    'marker.size':[[40*100]]
  }, [0]);
  • Ваши исходные данные и атрибуты должны быть простым массивом или объектом, а не массивом массивов / объектов.
    введите описание изображения здесь

      var t9 = {
  x: [100821],
  y: [11],
  name: 'Some text',
  text: 'Some text',
  mode: 'markers',
  marker: {
    size: [15*100],
    sizeref: 1,
    sizemode: 'area'
  }
};

var data = [t9];

var layout = {
  title: 'Chart',
  showlegend: true,
  xaxis: {
    title: 'Some text'
  },
  yaxis: {
    title: 'Some text',
    range: [-12, 30]
  }
};

var config = {responsive: true}

Plotly.newPlot('plot', data, layout, config);


Plotly.extendTraces(
  'plot', 
  {
    x: [[5491]],
    y: [[5]],
    'marker.size':[[40*100]]
  }, [0]);

Plotly.extendTraces(
  'plot', 
  {
    x: [[60022]],
    y: [[11]],
   'marker.size':[[200*100]] 
  }, [0]); 
     <head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<div id='plot'>

</div>