Plotly.js图表​​注释未对齐

Question

我有一个用plotly.js制作的热图。

一切似乎都很好，但是注释都在一边。 抵抗性 我有一个非常相似的热图，其中完全 相同布局属性，一切正常，包括注释。

这是“破碎的”jsfiddle this是一个正常的工作。

我真的无法弄清楚我错过了什么。

in两者相同（工作人员使用字符串，但我也尝试使用layout和String(catVar，但没有尝试。

Answer 1

在“已损坏”的示例中，您要将1添加到xValuesOne阵列中。 2和xValuesTwo。如果您使用['Page Views/Sessions'] resp交换两个数组。 ['Avg. Time on Site']你的x轴应该没问题。在layout中，您使用的是这两个分类值，但是您使用数字定义x轴，要么使用分类值，要么使用数字，但不要混用它们。 y轴也是如此。 同样在你破碎的例子中，你定义了两个热图，而在'工作'示例中只有一个。

在下面的代码段中，每个热图只有一个x值（一个值相同的数组），第一个热图为0，第二个热图为1。 x轴上的刻度标签会手动设置为您的类别（通过ticktext和tickvals）。

我尝试尽可能简单地使用您的脚本，而不是使用两个变量将它们放入数组中，删除未使用的变量等。

var channels = [{
  "channel": "(Other)",
  "pageviews": 1388082,
  "sessions": 314263,
  "avg_time": 54.94890183937861
}, {
  "channel": "Referral",
  "pageviews": 364869,
  "sessions": 50387,
  "avg_time": 58.104753437736335
}, {
  "channel": "Direct",
  "pageviews": 92538,
  "sessions": 22118,
  "avg_time": 59.21658970091479
}, {
  "channel": "Organic Search",
  "pageviews": 23470,
  "sessions": 4246,
  "avg_time": 51.96215449005384
}, {
  "channel": "Social",
  "pageviews": 8317,
  "sessions": 1931,
  "avg_time": 58.63430399702078
}];

var xValues = [[], []];
var yValues = [];
var zValues = [[], []];
var nc = -1;
var cat = ['Page Views/Sessions', 'Avg. Time on Site'];
var x = 0;
var layout = {
  title: 'Sessions',
  annotations: [],
  xaxis: {
    ticks: '',
    side: 'bottom',
    tickvals: [0, 1],
    tickmode: 'array',
    ticktext: cat
  },
  yaxis: {
    ticks: '',
    ticksuffix: ' ',
    autosize: false
  }
};
var result = {};
var txt;
channels.forEach(function(i) {
  xValues[0].push(0);
  xValues[1].push(1);
  yValues.push(i.channel);
  zValues[0].push(parseInt(i.pageviews / i.sessions));
  zValues[1].push(parseInt(i.avg_time));

  nc++;
  for (x = 0; x < cat.length; x += 1) {
    result = {
      xref: 'x1',
      yref: 'y1',
      x: x,
      y: i.channel,
      text: zValues[x][nc],
      font: {
        family: 'Arial',
        size: 12,
        color: 'rgb(50, 171, 96)'
      },
      showarrow: false
    };
    layout.annotations.push(result);
  }
});

var data = [{
  type: 'heatmap',
  x: xValues[0],
  y: yValues,
  z: zValues[0],
  colorscale: 'Greens',
  showscale: false
}, {
  type: 'heatmap',
  x: xValues[1],
  y: yValues,
  z: zValues[1],
  colorscale: 'Reds',
  showscale: false
}];

Plotly.newPlot('graph', data, layout);

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="graph"></div>