Question

请参阅代码，在Plot.ly论坛上的帖子Get data for current zoomed in view中，如果X和Y轴包含数值，则该代码有助于在当前缩放视图中获取数据。我们如何在以下Codepen中对条形图执行相同的操作。在此，条形图X轴包含字符串值。当x或y包含字符串值时，是否可以从当前缩放视图获取数据？

var data = [{
   x: ['giraffes', 'orangutans', 'monkeys', 'lion', 'tiger'],
   y: [20, 14, 23, 40, 13],
   type: 'bar'
}];

Plotly.newPlot('myDiv', data);

Answer 1

您可以使用与以前相同的功能，但是x轴上的每个整数值都代表分类列表中的一个值。

var data = [
  {
    x: ["giraffes", "orangutans", "monkeys", "lions", "tigers"],
    y: [20, 14, 23, 40, 13],
    type: "bar"
  }
];
var gd = document.getElementById("myDiv");

Plotly.newPlot(gd, data);
function showVisibleAnimals()
{
  var outputDiv = document.getElementById("visibleAnimals");
  outputDiv.innerHTML = "Visible Animals:<br />";
  var xRange = gd.layout.xaxis.range;

  if (xRange[0] < 0) {
    xRange[0] = -1;
  }

  for (
    var i = parseInt(xRange[0]) + 1;
    i < parseInt(xRange[1]) + 1 && i < data[0].x.length;
    i++
  ) {
    outputDiv.innerHTML += data[0].x[i] + "<br />";
  }
}
showVisibleAnimals();
gd.on("plotly_relayout", function() {
  showVisibleAnimals();
});

<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
  <div id='visibleAnimals'></div>
  <div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>
</body>

如果X和Y轴值在Plot.ly图表中包含字符串值，则获取当前缩放视图的数据

1 个答案: