ハイチャートヒートマップ - DateTime Y軸のアライメント

ハイチャートを使用して、日時x軸とy軸を使用してヒートマップを作成しようとしています。ハイチャートヒートマップ - DateTime Y軸のアライメント

y軸のアラインメントを除いて、すべてがよく見えます。

"00:00"はチャートの基点にあるはずですが、最初のボックスの中心にオフセットされています。

私は周りを見回しましたが、私はどんな設定をしなければならないのか分かりません。どんな助けもありがたい。

以下のjsFiddleの例をご覧ください。データアレイは[EpochTicksForStartOfDay, TicksForTimeOfDay, Value]

UPDATEが含まれています。私はヒートマップボックスの底部と整列するようにY軸線とラベルたいです。 1番目（最下位）のボックスは00:00に開始し、2番目の時間は01:00に、3番目の時間は02:00などとなります。

Htmlの

<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/modules/heatmap.js"></script> 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
<div id="container" style="height: 800px; min-width: 600px; margin: 0 auto"></div>

はJavaScript

$(function() { 

    var json = { 
    "Data": [ 
     [1453075200000, 0, 45.0000], 
     [1453075200000, 3600000, 46.0000], 
     [1453075200000, 7200000, 47.0000], 
     [1453075200000, 10800000, 48.0000], 
     [1453075200000, 14400000, 47.0000], 
     [1453075200000, 18000000, 46.0000], 
     [1453075200000, 21600000, 45.0000], 
     [1453075200000, 25200000, 46.0000], 
     [1453075200000, 28800000, 42.0000], 
     [1453075200000, 32400000, 43.0000], 
     [1453075200000, 36000000, 49.0000], 
     [1453075200000, 39600000, 42.0000], 
     [1453075200000, 43200000, 43.0000], 
     [1453075200000, 46800000, 46.0000], 
     [1453075200000, 50400000, 44.0000], 
     [1453075200000, 54000000, 44.0000], 
     [1453075200000, 57600000, 43.0000], 
     [1453075200000, 61200000, 41.0000], 
     [1453075200000, 64800000, 41.0000], 
     [1453075200000, 68400000, 40.0000], 
     [1453075200000, 72000000, 45.0000], 
     [1453075200000, 75600000, 43.0000], 
     [1453075200000, 79200000, 43.0000], 
     [1453075200000, 82800000, 45.0000], 
     [1453161600000, 0, 41.0000], 
     [1453161600000, 3600000, 42.0000], 
     [1453161600000, 7200000, 43.0000], 
     [1453161600000, 10800000, 44.0000], 
     [1453161600000, 14400000, 44.0000], 
     [1453161600000, 18000000, 43.0000], 
     [1453161600000, 21600000, 40.0000], 
     [1453161600000, 25200000, 39.0000], 
     [1453161600000, 28800000, 37.0000], 
     [1453161600000, 32400000, 36.0000], 
     [1453161600000, 36000000, 39.0000], 
     [1453161600000, 39600000, 35.0000], 
     [1453161600000, 43200000, 36.0000], 
     [1453161600000, 46800000, 37.0000], 
     [1453161600000, 50400000, 36.0000], 
     [1453161600000, 54000000, 36.0000], 
     [1453161600000, 57600000, 35.0000], 
     [1453161600000, 61200000, 35.0000], 
     [1453161600000, 64800000, 36.0000], 
     [1453161600000, 68400000, 35.0000], 
     [1453161600000, 72000000, 42.0000], 
     [1453161600000, 75600000, 42.0000], 
     [1453161600000, 79200000, 40.0000], 
     [1453161600000, 82800000, 36.0000], 
     [1453248000000, 0, 34.0000], 
     [1453248000000, 3600000, 34.0000], 
     [1453248000000, 7200000, 37.0000], 
     [1453248000000, 10800000, 37.0000], 
     [1453248000000, 14400000, 39.0000], 
     [1453248000000, 18000000, 38.0000], 
     [1453248000000, 21600000, 35.0000], 
     [1453248000000, 25200000, 36.0000], 
     [1453248000000, 28800000, 33.0000], 
     [1453248000000, 32400000, 33.0000], 
     [1453248000000, 36000000, 33.0000], 
     [1453248000000, 39600000, 34.0000], 
     [1453248000000, 43200000, 38.0000], 
     [1453248000000, 46800000, 36.0000], 
     [1453248000000, 50400000, 36.0000], 
     [1453248000000, 54000000, 36.0000], 
     [1453248000000, 57600000, 36.0000], 
     [1453248000000, 61200000, 36.0000], 
     [1453248000000, 64800000, 36.0000], 
     [1453248000000, 68400000, 37.0000], 
     [1453248000000, 72000000, 40.0000], 
     [1453248000000, 75600000, 41.0000], 
     [1453248000000, 79200000, 36.0000], 
     [1453248000000, 82800000, 48.0000], 
     [1453334400000, 0, 47.0000], 
     [1453334400000, 3600000, 45.0000], 
     [1453334400000, 7200000, 45.0000], 
     [1453334400000, 10800000, 45.0000], 
     [1453334400000, 14400000, 45.0000], 
     [1453334400000, 18000000, 43.0000], 
     [1453334400000, 21600000, 43.0000], 
     [1453334400000, 25200000, 41.0000], 
     [1453334400000, 28800000, 40.0000], 
     [1453334400000, 32400000, 49.0000], 
     [1453334400000, 36000000, 43.0000], 
     [1453334400000, 39600000, 40.0000], 
     [1453334400000, 43200000, 39.0000], 
     [1453334400000, 46800000, 39.0000], 
     [1453334400000, 50400000, 38.0000], 
     [1453334400000, 54000000, 38.0000], 
     [1453334400000, 57600000, 40.0000], 
     [1453334400000, 61200000, 40.0000], 
     [1453334400000, 64800000, 38.0000], 
     [1453334400000, 68400000, 38.0000], 
     [1453334400000, 72000000, 40.0000], 
     [1453334400000, 75600000, 42.0000], 
     [1453334400000, 79200000, 49.0000], 
     [1453334400000, 82800000, 52.0000], 
     [1453420800000, 0, 41.0000], 
     [1453420800000, 3600000, 40.0000], 
     [1453420800000, 7200000, 44.0000], 
     [1453420800000, 10800000, 46.0000], 
     [1453420800000, 14400000, 45.0000], 
     [1453420800000, 18000000, 46.0000], 
     [1453420800000, 21600000, 47.0000], 
     [1453420800000, 25200000, 47.0000], 
     [1453420800000, 28800000, 45.0000], 
     [1453420800000, 32400000, 48.0000], 
     [1453420800000, 36000000, 47.0000], 
     [1453420800000, 39600000, 46.0000], 
     [1453420800000, 43200000, 47.0000], 
     [1453420800000, 46800000, 58.0000], 
     [1453420800000, 50400000, 58.0000], 
     [1453420800000, 54000000, 58.0000], 
     [1453420800000, 57600000, 66.0000], 
     [1453420800000, 61200000, 60.0000], 
     [1453420800000, 64800000, 60.0000], 
     [1453420800000, 68400000, 54.0000], 
     [1453420800000, 72000000, 56.0000], 
     [1453420800000, 75600000, 55.0000], 
     [1453420800000, 79200000, 65.0000], 
     [1453420800000, 82800000, 63.0000], 
     [1453507200000, 0, 54.0000], 
     [1453507200000, 3600000, 61.0000], 
     [1453507200000, 7200000, 61.0000], 
     [1453507200000, 10800000, 61.0000], 
     [1453507200000, 14400000, 60.0000], 
     [1453507200000, 18000000, 60.0000], 
     [1453507200000, 21600000, 56.0000], 
     [1453507200000, 25200000, 57.0000], 
     [1453507200000, 28800000, 53.0000], 
     [1453507200000, 32400000, 54.0000], 
     [1453507200000, 36000000, 56.0000], 
     [1453507200000, 39600000, 56.0000], 
     [1453507200000, 43200000, 60.0000], 
     [1453507200000, 46800000, 63.0000], 
     [1453507200000, 50400000, 59.0000], 
     [1453507200000, 54000000, 58.0000], 
     [1453507200000, 57600000, 57.0000], 
     [1453507200000, 61200000, 59.0000], 
     [1453507200000, 64800000, 58.0000], 
     [1453507200000, 68400000, 58.0000], 
     [1453507200000, 72000000, 54.0000], 
     [1453507200000, 75600000, 54.0000], 
     [1453507200000, 79200000, 57.0000], 
     [1453507200000, 82800000, 53.0000], 
     [1453593600000, 0, 54.0000], 
     [1453593600000, 3600000, 54.0000], 
     [1453593600000, 7200000, 56.0000], 
     [1453593600000, 10800000, 57.0000], 
     [1453593600000, 14400000, 57.0000], 
     [1453593600000, 18000000, 55.0000], 
     [1453593600000, 21600000, 56.0000], 
     [1453593600000, 25200000, 57.0000], 
     [1453593600000, 28800000, 55.0000], 
     [1453593600000, 32400000, 55.0000], 
     [1453593600000, 36000000, 58.0000], 
     [1453593600000, 39600000, 61.0000], 
     [1453593600000, 43200000, 61.0000], 
     [1453593600000, 46800000, 61.0000], 
     [1453593600000, 50400000, 61.0000], 
     [1453593600000, 54000000, 59.0000], 
     [1453593600000, 57600000, 60.0000], 
     [1453593600000, 61200000, 62.0000], 
     [1453593600000, 64800000, 63.0000], 
     [1453593600000, 68400000, 67.0000], 
     [1453593600000, 72000000, 62.0000], 
     [1453593600000, 75600000, 63.0000], 
     [1453593600000, 79200000, 65.0000], 
     [1453593600000, 82800000, 65.0000] 
    ] 
    }; 

    $('#container').highcharts({ 
    chart: { 
     type: 'heatmap', 
     marginTop: 40, 
     marginBottom: 80, 
     plotBorderWidth: 1 
    }, 

    title: { 
     text: 'My Title' 
    }, 

    xAxis: { 
     type: 'datetime' 
    }, 

    yAxis: { 
     type: 'datetime', 
     labels: { 
     formatter: function() { 
      return Highcharts.dateFormat('%H:%M', this.value); 
     } 
     } 
    }, 

    colorAxis: { 
     min: 0, 
     stops: [ 
     [0, '#04006D'], 
     [0.33, '#119E00'], 
     [0.67, '#FFBF00'], 
     [1, '#F20011'] 
     ] 
    }, 

    legend: { 
     align: 'right', 
     layout: 'vertical', 
     margin: 0, 
     verticalAlign: 'top', 
     y: 25, 
     symbolHeight: 280 
    }, 

    tooltip: { 
     formatter: function() { 
     return '<b>' + this.point.value + '</b>'; 
     } 
    }, 

    series: [{ 
     colsize: 86400000, 
     rowsize: 3600000, 
     borderWidth: 1, 
     data: json.Data 
    }] 
    }); 
});

出典

2016-05-18 ETFairfax

半分の行サイズのすべてのデータポイント値を増やすと、すべてのポイントがグリッド線になり、ティックに整列されます - https://jsfiddle.net/h2zb2tos/6/これは取得しようとしていますか？ –

次のようにあなたのyAxisラベルにy値を追加してみてください：

yAxis: { 
    type: 'datetime', 
    labels: { 
    formatter: function() { 
     return Highcharts.dateFormat('%H:%M', this.value); 
    }, 
    y: 20 
    } 
},

ティを

はここにあなたの参考のために変更フィドルです：：sがあなたのラベルを次のように変更になりますhttps://jsfiddle.net/brightmatrix/h2zb2tos/4/

が、これはあなたの質問に役立つ場合は私に知らせてください！

出典

2016-05-18 11:18:20

答えをありがとう。それは私の質問に答えるが、私はそれが問題をかなり解決していないと思う。私はヒートマップボックスが薄い場合、y軸がどのように動作しているかを示すためにフィドルを更新しました。 https://jsfiddle.net/h2zb2tos/5/そして、軸線がボックスの一番下に並んでいないことがわかります。私はこれを強調するために私の質問を更新します。これまでのところ助けてくれてありがとう。 – ETFairfax

はい、その解決策では、行の高さに応じてy値を調整する必要があります。それは潜在的にラベルの問題を解決することはできますが、実際にはこの問題を引き起こしている実際のティック/グリッドライン位置は修正されません。 – jlbriggs

ハイチャートヒートマップ - DateTime Y軸のアライメント

答えて

関連する問題