Plotly.js図表注釈が整列していません

Question

私はplotly.jsで作られたヒートマップを持っています。

すべてがうまくいくようですが、注釈はすべて片側にあります。 の抵抗 正確な同じのレイアウトプロパティと非常によく似たヒートマップがあり、注釈を含めてすべてが機能します。

これは「壊れた」jsfiddle です。thisは問題なく動作しています。

本当に私は何が欠けているのか分かりません。

layoutは両者で同じです（実際には文字列を使用しますが、String(catVarとString(i.channel)でも何もしません）。

Answer 1

「壊れた」例では、xValuesOneアレイrespに1を追加しています。 2およびxValuesTwo。両方のアレイを['Page Views/Sessions'] respと交換すると、 ['Avg. Time on Site']あなたのx軸は良いはずです。 layoutでは、これらの2つのカテゴリ値を使用していますが、x軸を数値で定義する場合は、カテゴリ値または数値を使用しますが、それらを混在させないでください。 y軸についても同様です。 また、あなたの壊れた例では、2つのヒートマップを定義していますが、「作業中の」例では1つしかありません。各ヒートマップ下のスニペットで

---

、第二のために1を、唯一のx値（同一の値を持つ配列）を有する第一のヒートマップのため0。 x軸のティックのラベルは、（ticktextとtickvalsを使用して）カテゴリに手動で設定されます。

私はこんにちは@ maximilian-

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>