Показать полный диапазон оси для графика Plotly? - PullRequest
Новая
       10

Показать полный диапазон оси для графика Plotly?

1 голос
/ 29 апреля 2019

Как вы можете показать от 0,0 (или самая низкая отрицательная точка) до 8,8 (или самая высокая точка данных) на графике x, y, одновременно показывая полный график? 

var data = [
  {
    x: [3, 4, 5, 6, 7, 8],
    y: [3, 4, 5, 6, 7, 8],
    type: 'scatter'
  }
];
var layout = {
  // autosize: true,
  // rangemode: "tozero",
  width: 500,
  height: 500,
  autoscale: false,
  xaxis: { autorange: false },
  yaxis: { autorange: false },
};
Plotly.newPlot('myDiv', data, layout, {showSendToCloud: true});

Если вы включите автодиапазон, он показывает данные, но не 0,0.

with autorange on

Если вы отключите автодиапазон, он показывает 0,0, но не данные.

with autorange off

Вот рабочая демонстрация: https://codepen.io/Xeoncross/pen/MRREXq

Ответы [ 2 ]

1 голос
/ 29 апреля 2019

Вы можете просто установить rangemode на 'tozero' и включить autorange для каждой оси: 

var data = [
  {
    x: [3, 4, 5, 6, 7, 8],
    y: [3, 4, 5, 6, 7, 8],
    type: 'scatter'
  }
];
var layout = {
  width: 500,
  height: 500,
  autoscale: false,
  xaxis: { rangemode:'tozero', autorange:true},
  yaxis: { rangemode:'tozero', autorange:true}
};

Plotly.newPlot('myDiv', data, layout, {showSendToCloud: true});
<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  <!-- jquery -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<!-- Plotly chart will be drawn inside this DIV -->
<div id="myDiv"></div>
</body>

См. Официальные примеры Plotly .

1 голос
/ 29 апреля 2019

У вас есть все данные, и они просто скрыты из-за уровня масштабирования по умолчанию.Если вы хотите, чтобы по умолчанию все точки данных отображались одновременно, вы можете установить диапазон по осям X и Y.

Кроме того, установка диапазона не повлияет на масштабирование в будущем.

По сути, вы можете установить диапазон min и max равным 0 и своим максимальным значением. 

xaxis: { autorange: false, range:[0, 10]},
yaxis: { autorange: false, range:[0, 10]},



В следующем фрагменте, который я сделалдве переменные для отслеживания x и y max и добавления 2. Это обеспечит наличие буфера 2 в верхней части для отображения всех точек данных.

var data = [
  {
    x: [3, 4, 5, 6, 7, 8],
    y: [3, 4, 5, 6, 7, 8],
    type: 'scatter'
  }
];

var xMax = data[0].x[data[0].x.length - 1] + 2;
var yMax = data[0].y[data[0].y.length - 1] + 2;
var layout = {
  // autosize: true,
  // rangemode: "tozero",
  width: 500,
  height: 500,
  autoscale: false,
  xaxis: { autorange: false, range:[0, xMax]},
  yaxis: { autorange: false, range:[0, yMax]},
};

Plotly.newPlot('myDiv', data, layout, {showSendToCloud: true});
<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  <!-- jquery -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<!-- Plotly chart will be drawn inside this DIV -->
<div id="myDiv"></div>
</body>


Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...