javascript - Plotly.js 图表注释未对齐

Question

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

一切似乎都工作正常，但是注释都在一侧。 反抗 我有一个非常相似的热图，具有精确相同布局属性，并且一切正常，包括注释。

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

我真的不知道我错过了什么。

两者的布局是相同的(工作的布局使用字符串，但我也尝试过使用String(catVar和String(i.channel)) > 但什么也没有)。

Answer 1

在“损坏”示例中，您将 1 添加到 xValuesOne 数组中。 2 和 xValuesTwo。如果您分别使用 ['Page Views/Sessions'] 交换两个数组。 ['平均。 Time on Site'] 你的 x 轴应该没问题。在您的布局中，您正在使用这两个分类值，但您使用数字定义 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>